antd上传组件remove删除自定义存储文件使用踩坑记录

需求:选择要上传的文件后,点击文件列表中的删除图标,调用remove,删除自定义存储文件链接数组中的对应数据

首先看一下官方文档:antd上传组件remove删除自定义存储文件使用踩坑记录_第1张图片因为我这里限制了只能上传一个文件,所以删除的时候将对应的fileList清空就行,remove绑定的方法不传参数时会默认将对应文件数据传递进去,我想直接传递一个参数,会覆盖掉默认传递的参数,然后直接操作我传递的参数,结果这样做报错了,remove绑定的事件直接触发了切告警会递归地触发自己,死循环了

错误代码:

<a-upload
   :accept="data.options.accept"
   :file-list="data.options._uploadModalFile"
   :before-upload="file => beforeTableUpload(file, data)"
   :remove="handleTableRemove(data)"
 >
   <a-button>
     <SvgIcon iconClass="fileupload" style="margin-right: 10px;" />
     点击上传
   </a-button>
 </a-upload>

告警信息:
antd上传组件remove删除自定义存储文件使用踩坑记录_第2张图片

修改后代码:

<a-upload
  :accept="data.options.accept"
  :file-list="data.options._uploadModalFile"
  :before-upload="file => beforeTableUpload(file, data)"
  :remove="file => handleTableRemove(file, data)"
>
  <a-button>
    <SvgIcon iconClass="fileupload" style="margin-right: 10px;" />
    点击上传
  </a-button>
</a-upload>

将data作为自定义参数传进去,这样就解决了。

你可能感兴趣的:(Vue,前端,es6,javascript)