Antd Upload 文件上传，自定义上传错误信息

项目需求

使用antd Upload 组件
项目上要求前端对上传不符合标准的图片展示具体的错误信息
不设置action，即返回信息无response ，先在前端上传后调用接口保存

---

效果截图

主要是根据不同校验规则展示不同信息

Antd Upload 组件源码

let message;
if (file.response && typeof file.response === 'string') {
  message = file.response;
} else {
  message = file.error?.statusText || file.error?.message || locale.uploadError;
}

由此可知，信息展示字段有三个可以设置 response、file.error?.statusText、file.error?.message

代码实现

beforeUpload = (file) => {
    //...个人业务
    if (!ret) {
      file.status = 'error';
      file.response= '错误信息！';  //response
      file.error = {
        statusText: '错误信息！', //file.error.statusText
        message : '错误信息！', //file.error.message
      }
      return false;
    }
    return false;
  };

前端一般校验都是在beforeUpload实现的，所以在校验结束后，修改file对象的属性就可以

总结

一般来说大多数的图片上传都是直接上传至服务器，但是也有的项目是先上传至前端，前端校验后再调用接口保存至服务器，这种情况校验信息就不好自定义展示了，这几个属性一般来说可以满足大多数需求了