需求：我司要求實作多檔案上傳，且要求使用formData傳遞參數。
環境：vue+element-ui+axios
實作：
1. 使用element-ui upload元件搭建上傳檔案頁面，頁面示例如下：
代碼如下：
<template>
<div>
<el-upload :multiple="true" class="upload-demo" action="" drag="" ref="upload" :on-change="handleImport" :auto-upload="false" :http-request="uploadFile" name="file">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将檔案拖到此處，或
<em>點選上傳</em>
</div>
<div class="el-upload__text">
隻能上傳.xml檔案
</div>
</el-upload>
<el-row :span="20">
<el-col :guter="20" align="left" style="margin-top:20px;">
<el-button size="small" type="primary" style="margin-right:10px;" @click="submitUpload">
确定
</el-button>
<el-button size="small" @click="handleCancel">
取消
</el-button>
</el-col>
</el-row>
</div>
</template>
2. data中設定兩個變量fileList3和fileData，其中fileList3用來存儲檔案清單、fileData用來将檔案追加到formData中
data() {
return {
fileList3: [],
fileData:''
};
},
3. 引入axios
import axios from 'axios'
4. 定義方法
// 導入檔案時将檔案存入數組中
handleImport(file, fileList) {
this.fileList3 = fileList
},
// 點選上傳時覆寫預設上傳事件
uploadFile:function(file){
this.fileData.append('file', file.file);
},
// 點選上傳按鈕
submitUpload(params) {
if(this.fileList3.length==0){
this.$message.error('請選擇檔案')
return
}
this.fileData = new FormData();
this.$refs.upload.submit();
var that = this;
axios({
method:"POST",
url: `你的接口位址`,
data:that.fileData,
contentType: false,//這裡不要落下
dataType: 'json',
headers: { "Content-Type": "multipart/form-data",token:getStore("token") ? JSON.parse(getStore("token")) : ""},//其他需要追加到請求頭的資訊也可放入這裡，我司需要追加一個token以做身份校驗，同時利用表單上傳Content-Type必須設定為multipart/form-data
}).then((res)=>{
let code =res.data.code
if(code==200){
this.$message({
message: '上傳成功',
type: 'success'
});
}else{
this.$message.error(res.msg);
}
})
.catch((response)=>{
this.$message.error(response.msg);
})
}
5. 實作後的截圖如下：
6. 後端是java，springMVC，附上後端代碼
@OperationLog(operatorDesc = "上傳資料源檔案",moduleName = "資料源管理",isJsonFormat = false)
@RequestMapping("uploadFile")
public Object fileUpload(MultipartHttpServletRequest request){
try {
//擷取檔案集合
Map<String, MultipartFile> fileMap = request.getFileMap();
//判斷檔案是否為空
if(fileMap == null || fileMap.size() == 0){
return WebUtil.returnError("請上傳檔案");
}
Collection<MultipartFile> files = fileMap.values();
initFileService.upLoadFile(files);
} catch (Exception e) {
String message = LogUtil.formatErrorMessage("上傳檔案失敗", e);
super.log.error(message);
return WebUtil.returnError("上傳檔案失敗");
}
return WebUtil.returnOk("success");
}
如果有問題可以聯系我哦：微信：lm13821687665，qq密碼已經找不到是以隻能放上微信了。