1. element-ui的默認
默認是異步多次請求上傳單個文件
如果業務就是單純的上傳文件，那么這個樣子是沒有問題的
前端代碼參考
https://element-plus.gitee.io/#/zh-CN/component/upload
后端接口
@RequestMapping("upload")
@ResponseBody
public CommonVO fileUpload(@RequestParam("file") MultipartFile multipartFile) {
2. 業務不同
但如果你的業務是上傳文件的同時插入數據庫內容的話，那么就會有問題
比如以下代碼
@RequestMapping("upload")
@ResponseBody
public CommonVO fileUpload(@RequestParam("file") MultipartFile multipartFile, String trainName, String trainContent) {
// 內部邏輯為保存multipartFile文件，並數據庫保存trainName,trainContent
return staffTrainService.saveTrainAndUpload(multipartFile,trainName,trainContent);
}
此時由於發了兩次請求，導致同樣的數據被保存多次
如果要解決這種情況，還需后端進行同步，然后去判斷內容有沒有被保存過（這也不好進行判斷）
所以最好的情況就是前端只發送一次請求
3. 最終解決方案代碼
1. 前端
1. 頁面
前端最重要的就是el-upload中的:http-request，這個是讓我們自定義上傳方法
當然還有取消自動上傳:auto-upload="false"
<html>
<head></head>
<body>
<el-upload class="upload-demo" ref="upload" action="/manager/staffTrain/upload" :on-preview="handlePreview" :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :data="dataModel" :on-success="handleSuccess" :http-request="uploadFile">
<template #trigger="">
<el-button size="small" type="primary">
選取文件
</el-button>
</template>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-show="false">
發 布
</el-button>
</el-upload>
</body>
</html>
2. 數據
data() {
return {
// 這是上傳文件的同時攜帶的數據
dataModel: {
trainName: '',
trainContent: '',
},
// 文件上傳
fileData: '', // 文件上傳數據（多文件合一）
fileList: [], // upload多文件數組
}
},
3. 方法
methods: {
// 覆蓋上傳事件，選擇文件之后觸發的事件
uploadFile(file) {
this.fileData.append('files', file.file); // append增加數據
},
// 點擊上傳后觸發的事件
submitUpload() {
if (this.dataModel.trainName === '') {
this.message({
message: '請輸入培訓名稱',
type: 'warning'
})
} else {
const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
if (!isLt100M) {
this.$message.error('請檢查，上傳文件大小不能超過100MB!');
} else {
this.fileData = new FormData(); // new formData對象
this.$refs.upload.submit(); // 提交調用uploadFile函數
this.fileData.append('trainName', this.dataModel.trainName); // 添加培訓名稱
this.fileData.append('trainContent', this.dataModel.trainContent); // 添加培訓內容
this.postRequest("/manager/staffTrain/upload", this.fileData).then((resp) => {
if (resp.success) {
this.fileList = [];
this.addDialogVisible = false;
//清空表單
this.$refs['addForm'].resetFields();
this.getTableData(this.pageNo, this.pageSize);
}
});
}
}
},
//監控上傳文件列表
handleChange(file, fileList) {
let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
if (existFile) {
this.message.error('當前文件已經存在!');
fileList.pop();
}
this.fileList = fileList;
},
},
2. 后端
這時候就可以直接接受一整個multipartFiles數組了
@RequestMapping("upload")
@ResponseBody
public CommonVO fileUpload(@RequestParam("files") MultipartFile[] multipartFiles, String trainName, String trainContent) {
return staffTrainService.saveTrainAndUpload(multipartFiles,trainName,trainContent);
}