【案例4】element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题

本文讲述了在Element-Upload组件中遇到的重复上传问题,关键在于清除`fileList`。解决方法是在`on-success`钩子中使用`clearFiles()`,确保每次成功上传后旧文件被移除,以便后续重新上传。
摘要由CSDN通过智能技术生成

element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题

今天在开发的时候,文件上传都没有问题,但是修改文件数据后,再次上传时就没有反应了,导致整个问题的原因是因为你没有清除当前 fileList,导致它一直保存这你第一次上传文件的信息,只要你把他一刀切掉就好了!

那么问题来了,应该怎么清除呢!所以要想继续上传文件,就需要在on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件 看下面的代码:

<el-upload
   class="upload-demo"
   ref='upload'
   action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  :on-success="handleSuccess"
   multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
   <el-button size="small" type="primary">点击上传</el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
 </el-upload>

在上传成功的方法中这样写:

handleSuccess(res, file) {
  this.$refs.upload.clearFiles() //上传成功之后清除历史记录
}

这样就能解决你不能继续上传的问题了!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值