【vue】架構之el-upload使用

1.upload.vue 頁面

< template > < div class = "app-container" > < form id = "upload" enctype = "multipart/form-data" method = "post" > < el-upload class = "upload-demo" action = "" :on-preview = " handlePreview " :on-remove = " handleRemove " :before-remove = " beforeRemove " multiple :limit = " 3 " :on-exceed = " handleExceed " :http-request = " handlePost " :file-list = " fileList " > < el-button size = "small" type = "primary" > 點選上傳 </ el-button > < div slot = "tip" class = "el-upload__tip" > 隻能上傳jpg/png檔案，且不超過500kb </ div > </ el-upload > </ form > </ div > </ template >

< script > 'use strict' ; // import splitPane from 'vue-splitpane' import { postUpload } from '@/api/api' // import waves from '@/directive/waves' // 水波紋指令 export default { data () { return { fileList: [ { name: 'food.jpeg' , url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg' , url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' } ] }; }, methods: { handleRemove ( file , fileList ) { console . log ( file , fileList ); }, handlePreview ( file ) { console . log ( file ); }, handleExceed ( files , fileList ) { this . $message . warning ( `目前限制選擇 3 個檔案，本次選擇了 ${ files . length } 個檔案，共選擇了 ${ files . length + fileList . length } 個檔案` ); }, beforeRemove ( file , fileList ) { return this . $confirm ( `确定移除 ${ file . name } ？` ); }, handlePost ( file ) { // action="/docmanager/external/upload" var data = document . getElementById ( 'upload' ); const fd = new window . FormData ( data ) fd . append ( 'categoryId' , 1 ) fd . append ( 'tag' , 2 ) fd . append ( 'description' , 3 ) fd . append ( 'prefix' , 4 ) fd . append ( 'file' , file ) // 配置post請求的參數。參數名file,後面跟要傳的檔案，參數名fileType，值為category（看後端的具體要求） // fd.append('file', file) postUpload ( fd ). then ( response => { console . log ( 1 ); console . log ( response ); console . log ( file ); console . log ( 2 ); }) } } }

</ script >

< style lang = "stylus" scoped > </ style >

2.api.js

postUpload ：最終請求的rest路徑

export const postUpload = params => { return service . post ( '/docmanager/file' , params ). then ( res => res . data ) }

3.FileController.java 背景接口

@RestController
@RequestMapping("/file")
public class FileController {      

@AuthInterceptor
@RequestMapping(value = "", method = RequestMethod.POST)
public String upload(int categoryId, String tag, String description, String prefix, 
            @RequestParam("file") MultipartFile multipartFile) {
    User user = (User) request.getSession().getAttribute(ValueConsts.USER_STRING);
    return ControllerUtils.getResponse(
    fileService.upload(categoryId, tag, description, prefix, multipartFile,user));
}      

}

注意：自己在開發中遇到的問題

e1：action="/docmanager/file" 這樣可以自動送出，當我想自己寫方法處理，于是檢視了el-upload的官方文檔，

    提供了http-request="自己的function名稱"

e2:action送出的時候可以請求到背景接口，但是自己寫的函數post的送出的時候卻不能，問題出現在幾個方面

      a1： 請求頭部格式enctype="multipart/form-data";

      a2： 請求利用FormData送出;

        var data = document.getElementById('upload');

          const fd = new window . FormData ( data )      fd . append ( 'categoryId' , 1 )      fd . append ( 'tag' , 2 )      fd . append ( 'description' , 3 )      fd . append ( 'prefix' , 4 )      fd . append ( 'file' , file )

          postUpload(fd).then(response => {      console . log ( 1 );      console . log ( response );      console . log ( file );      console . log ( 2 );      })