element-ui上傳組件，通過自定義請求上傳文件

記錄使用element-ui上傳組件，通過自定義請求上傳文件需要注意的地方。

<el-upload
           ref="uploadMutiple"
           :auto-upload="false"
           action="Fake Action"
           :on-success="allHandleSuccess"
           :on-change="handleChange"
           :file-list="fileList"
           :http-request="allUpload"
           :before-upload="before_upload"
           multiple
>選取文件</el-upload>

<el-button type="primary" size="small" @click="submitUpload">上傳</el-button>

首先關閉自動上傳，並給隨便給action賦值一個字符串。（action是必填屬性）

       :auto-upload="false"
       action="Fake Action"

通過:on-change鈎子函數，拿到文件列表：

    handleChange(file, fileList) {
      this.fileList = fileList;
    },

一般情況下，我們在submitUpload（）的點擊事件中去觸發上傳：

submitUpload() {
	this.$refs.uploadMutiple.submit();
}

之后組件會觸發:http-request鈎子行數。需要注意的是，這里你的fileList中有幾個文件，就會執行幾次:http-request鈎子函數。這意味着，如果你把上傳請求寫在:http-request鈎子函數中，就會造成重復不必要的請求。直接在submitUpload()中寫post請求即可。只需要把文件封裝為formData對象，作為參數傳給后台即可。

      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append("files", item.raw);
      });

	  this.axios.post(api, formData);

下面是后台接口的寫法：

public JSONResponse archiveBatchImport(@RequestParam("files") MultipartFile[] files){}