Error description:
Use the upload file component of element-ui to write a batch upload and upload files, but found that after each file upload or batch upload files, the files cannot be uploaded again or upload files in batches. Only when you enter the page for the first time and click to upload files or upload files in batches can the upload interface be called to upload files, and the second time to upload files or upload files in batches can only upload files after refreshing the page .
Reason for error:
After a single file is uploaded, a file has already been placed in the file-list in data. When you upload again, this file is not cleared or the previous file is overwritten, resulting in the upload behavior not being executed.
Solutions:
Just click the upload file or batch upload file button, whether the upload fails or the upload succeeds, you must clear the file-list . When the upload event is executed next time, the event will be triggered again, and the problem can be solved.
element-ui-documentation
Code display:
upload files
When no file is uploaded, the operation button is [Upload File]. Click to upload a file.
After the file is uploaded, the operation button changes to [Modify File], and the file can be re-uploaded after clicking to overwrite the original file.
<el-upload
class="upload-demo"
style="display: inline-block"
ref="uploadFileRef"
:action="uploadUrl()"
:on-success="uploadFileSuccess"
:on-error="batchUploadError"
:show-file-list="false"
:limit="1" //限制文件上传数量
accept=".pdf" //限制文件上传后缀名
:before-upload="beforeUpload"
:file-list="fileList"
>
<el-button
size="small"
type="text"
@click="uploadFile(scope.row)"
>
<span>{
{
scope.row.url == null ? "上传文件" : "修改文件"
}}</span>
</el-button>
</el-upload>data() {
return {
fileList: [],
};
}, /**
* 上传文件
*/
uploadFile(row) {
this.selectUploadData.flowNumber = row.flowNumber;
},
uploadFileSuccess(response) {
if (typeof response == "undefined") {
return;
}
if (response.returnCode != "SUCCESS") {
this.$message({
type: "warning",
showClose: true,
message: "文件上传失败",
});
return;
}
this.uploadFileQuery.flowNumber = this.selectUploadData.flowNumber;
this.uploadFileQuery.url = response.data.filePath;
api.xxx(this.uploadFileQuery).then((res) => {
this.uploadFileQuery.flowNumber = "";
this.uploadFileQuery.url = "";
this.$message({
type: "success",
showClose: true,
message: "上传成功",
});
this.fileList=[] // 清空fileList
this.search();
});
},
Bulk upload files
Click the [Batch Upload Files] button to upload files in batches.
After uploading, if the selected content has already uploaded files, a pop-up window will pop up: whether all the uploaded files of the selected content have been overwritten. Click the [Overwrite] button to overwrite all files, click the [Do not overwrite] button to not overwrite the original files (the uploaded options will not be modified), and click the [Cancel] button to cancel the upload.
<el-button type="primary" size="small" @click="checkSelectBatch()"
>批量上传文件</el-button
>
<el-upload
ref="uploadBatchButton"
class="upload-demo"
:action="uploadUrl()"
:on-success="batchUploadFiles"
:on-error="batchUploadError"
:show-file-list="false"
v-show="false"
:limit="1"
accept=".pdf"
:before-upload="beforeUpload"
:file-list="batchFileList"
>
</el-upload>data() {
return {
batchFileList: [],
};
}, /**
* 批量上传文件
*/
checkSelectBatch() {
if (this.multipleSelection.length <= 0) {
this.$message({
type: "warning",
showClose: true,
message: "请选择要批量操作的内容",
});
return false;
}
this.$refs.uploadBatchButton.$refs["upload-inner"].handleClick(); //触发上传组件中的按钮点击事件
},
//批量上传
batchUploadFiles(response) {
if (response.returnCode != "SUCCESS") {
this.$message({
type: "warning",
showClose: true,
message: "文件上传失败",
});
return;
}
this.batchUploadForm.url = response.data.filePath;
for (let i = 0; i < this.multipleSelection.length; i++) {
if (this.multipleSelection[i].url != null) {
this.dialogVisible.batchUploadBatchVisible = true;
return;
}
}
this.uploadIsCover(1);
},
batchUploadError() {
this.$message({
type: "warning",
showClose: true,
message: "文件上传失败",
});
},
/***
* 批量上传文件覆盖对话框 1.覆盖 2.不覆盖
*/
uploadIsCover(flag) {
let newMultipleSelection = [];
if (flag === 2) {
newMultipleSelection = this.multipleSelection.filter(
(item) =>
typeof item.url == "undefined" || item.url == null || item.url == ""
);
} else {
newMultipleSelection = this.multipleSelection;
}
// console.log(newMultipleSelection, "newMultipleSelection");
if (newMultipleSelection <= 0) {
this.resetForm();
return;
}
newMultipleSelection.forEach((item) => {
this.uploadFileQuery.flowNumber = item.flowNumber;
this.uploadFileQuery.url = this.batchUploadForm.url;
this.batchQuery.unshift(
JSON.parse(JSON.stringify(this.uploadFileQuery))
);
});
api.xxx(this.batchQuery).then((res) => {
this.batchQuery = [];
this.uploadFileQuery.flowNumber = "";
this.uploadFileQuery.url = "";
this.$message({
type: "success",
showClose: true,
message: "文件上传成功",
});
this.batchFileList=[] // 清空batchFileList
this.search();
});
this.resetForm();
},