Upload 组件,模拟批量删除,报错问题处理

场景:

正常情况下,使用 Upload 组件,需要添加 action,以便将图标上传至服务器,但是在我们的项目中,不需要真正的将图片上传,只需要 读取到 File 对象,并将 File对象 通过 FormData 传给后端即可,注释掉 action 以后发现 loading 的状态 无法变为 success

思路:

通过 自定义 customRequest ,调用 onSuccess 解决。

方案:

<Upload
  name="file"
  listType="picture"
  className="icons-uploader"
  accept=".svg"
  showUploadList={{
    showRemoveIcon: true,
    removePopConfirmTitle: intl.get('hpfm.iconsManage.modal.confirmDelete').d('是否要删除?'),
  }}
  onChange={handleChange}
  onPreview={handleEdit}
  fileList={fileList}
  customRequest={(option) => {
    setTimeout(() => {
      option.onSuccess({ status: 'success' }, option.file);
    }, 500);
  }}
>
  {fileList.length >= 5 ? null : (
    <Button>
      <Icon type="file_upload" /> {intl.get('hpfm.iconsManage.modal.upload').d('上传')}
    </Button>
  )}
</Upload>

.

posted @ 2022-09-07 23:53  每天都要进步一点点  阅读(58)  评论(0)    收藏  举报