问题:vue2的elementui组件el-upload没有说明如何在限制只能上传一个文件的情况下,再次上传覆盖原文件(其实vue3对应的elementui已经有说明了,我借鉴了一下,写出来,想看Element Plus的上传覆盖原理的请点击链接: link)
废话少说上代码!亲测有效
<el-upload
class="upload-demo"
ref="upload"
:limit="1"
accept=".jpg, .png, .jpge"
:on-remove="handleFileRemove"
:on-exceed="handleExceed"
:action="uploadFileUrl"
:on-success="uploadSuccessApply"
:on-error="uploadErrorApply"
:file-list="fileList"
:headers="headers">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
// 限制上传数量
handleExceed(files, fileList) {//files指的是你刚上传的文件,fileList指的是你上传之前的文件数组
this.$set(fileList[0], 'raw', files[0]);//raw就是指文件
this.$set(fileList[0], 'name', files[0].name);//name就是指文件名
this.$refs.upload.clearFiles();//删除所有上传的文件
this.$refs.upload.handleStart(files[0]);//handleStart()指的是手动选择文件,Element Plus 的el-upload有说明
this.$refs.upload.submit();//手动上传
},
喜欢的点赞、收藏、加关注!!!
有问题的评论区提问。谢谢!!!