vue2 elementui上传组件自动替换上一个文件,el-upload覆盖前一个文件

问题: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();//手动上传
        },

喜欢的点赞、收藏、加关注!!!
有问题的评论区提问。谢谢!!!

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值