基于antd二次封装手动上传组件
背景
上传下载的场景中，需要封装一个易用的上传下载组件
要求：上传前校验文件类型（白名单），上传时显示上传进度，跟踪上传结果，上传成功则显示下载和删除icon；失败则文件标红，并且只能删除，无法提交最终上传结果。
由于接口问题，需要自定义自己的上传实现，无法使用Upload组件的默认上传行为。
部分代码实现
UploadCp.jsx
生命周期
componentDidMount (){
this.props.wrappedComponentRef(this); // 绑定实例
}
其他主要代码
细节
- 如果”上传失败” ，onError函数需要传入一个Error对象，这样鼠标移上去显示的失败信息会是Error对象的message字段
error 默认显示接口失败返回报文
判定失败的时候，需要file的 status为 ‘error’,
上传前的校验函数封装
校验上传类型白名单
校验函数
删除功能部分
下载部分
下载函数封装:
下载接口封装:
使用封装的上传组件
结果与反思
本次组件封装满足了业务需求，但是还存在一些不足
- 下载的时候不会显示进度条（懒）
- 更新上传列表的文件标识集合的时候，触发过于频繁
对于上传的文件类型，到底是选用formData的格式还是arrayBuffer的形式，还是不太能理解，需要加强学习。
如果使用fetch进行上传的话，fetch是不提供aip检测上传进度的。
原文链接：https://juejin.cn/post/7329350541136494646 作者：某哈压力大
