antdesignUpload组件的使⽤总结
事先说明：所使⽤"rc-upload"组件在npm是有单独的包，upload对其进⼀步封装。"rc-upload"
有更多的API选择。
需求
要求限制上传图⽚的格式、⼤⼩、分辨率。
简单介绍
这是⼀个最简单的upload组件使⽤
<Upload action="...">
上传
</Upload>
简单说⼀下关键⼏个参数
参数作⽤
action上传的服务器地址，使⽤默认上传⾏为必填
beforeUpload默认上传⾏为之前的钩⼦函数，⽤来限制上传⽂件
customRequest⾃定义上传（本⽂关键）
fileList已上传列表
本⽂的关键就在于customRequest、fileList和onRemove三个api。
平常使⽤
该组件已经将上传⽂件封装的及其简单
<Upload action="..." onChange={...} beforeUpload={...}>
上传
</Upload>
在所有提供的钩⼦函数都会接受file参数。它就是⽤户上传⽂件的RcFile形式。
主要参数有
{
type    // ⽂件格式
size    // ⽂件⼤⼩
status  // 状态有：uploading done error removed 只有在onChange事件才会变化
response // 服务端响应内容，
}
在beforeUpload调⽤file的type和size来限制上传⽂件。beforeUpload如果返回false就是取消上传⾏为。
来⾄官⽹的⽰例
function beforeUpload(file) {
const isJPG = pe === 'image/jpeg';
if (!isJPG) {
<('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
<('Image must smaller than 2MB!');
}
return isJPG && isLt2M;
}
当⽂件开始上传的时候，这时候调⽤onChange 读取到sponse获取到服务端的回调，来实现我们的功能。
进⼀步使⽤
1. 显然默认的⾏为不能实现我的要求，file对象并没有分辨率的参数。我所采⽤的是把上传的图⽚实例化读取它的⾼宽。这样出现⼀个问
题。image只有在触发load事件之后才能被读取宽⾼，我们没有办法将我们的判断传递给beforeUpload，也就阻⽌不了上传事件。
const { file } = files
// files是customRequest参数
const reader = new FileReader();
reader.addEventListener("load", e => {
const data = sult;
//加载图⽚获取图⽚真实宽度和⾼度
const image = new Image();
image.addEventListener("load", () => {
const w = image.width;
const h = image.height;
});
image.src = data;
});
// 我们传递不出false。
所有只能使⽤customRequest来覆盖默认上传。但这样有两个弊端。
1. 上传状态⽆法被onChange捕获。
2. 我们需要⾃⼰控制fileList。
3. 组件showUploadList会出现我们不想展⽰的图⽚。
其实到这⼀步已经可以实现效果，但是我想要组件的showUploadList所展⽰的上传列表，毕竟别⼈已经写好动画了。
所有我们要控制fileList于state绑定，初始值设为[]，上传成功后fileList增加新的元素。
customRequest = (files) => {
const { file } = files
...// 前⾯限制
let formData = new FormData();
formData.append("file", file);
http('',formData).then(
res =>
this.setState(() => ({ fileList: [{ ...file }, { url, status: "done" }] }));
)
}
设置的fileList是安装官⽅defaultFileList 的形式添加的
{
uid: '1',
name: 'xxx.png',
status: 'done',
response: 'Server Error 500', // custom error message to show
url: 'www.baidu/xxx.png',
}
o nR em o ve
使⽤了showUploadList就需要使⽤onRemove来删除⽂件列表元素。我们先看看onRemove的介绍
点击移除⽂件时的回调，返回值为 false 时不移除。⽀持返回⼀个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除由于同时涉及到表单我也⽤了Form组件，同样也要使⽤Form组件的表单验证。
onRemove = () => {
this.setState(() => ({
fileList: []
}));
}
图⽚是删除⾥但是并没有触发Form的验证。Form都是靠表单的onChange来触发的。所有查了⼀下源码。
handleRemove(file: UploadFile) {
const { onRemove } = this.props;
// Prevent removing file
if (ret === false) {
return;
}
const removedFileList = removeFileItem(file, this.state.fileList);
if (removedFileList) {
file,
fileList: removedFileList,
});
}
});
}
其中的 removeFileItem 如下
export function removeFileItem(file: UploadFile, fileList: UploadFile[]) {ant安装包
const matchKey = file.uid !== undefined ? 'uid' : 'name';
const removed = fileList.filter(item => item[matchKey] !== file[matchKey]);
if (removed.length === fileList.length) {
return null;
}
return removed;
}
可以看出之前fileList已被我们设为[]，removeFileItem 返回为null，所以没有触发onChange。没办法，我们只能⾃⼰触发了，传⼊参数上⾯的代码已给出。
<Upload ref=ref => f = ref>
上传
</Upload>
onRemove = () => {
...// 前⾯操作
}
⾄此我个⼈所有需求全部解决。但是我在逛github的Issues 的时候发现有⼈提这样⽆法获取上传的进度。
ajax是有原⽣获取上传⽂件进度的⽅法的。我使⽤的是axios的onUploadProgress⽅法。
onUploadProgress:(progressEvent) => {
const {lengthComputable, loaded, total} = progressEvent
lengthComputable, //是否能够被读取长度
loaded// 已上传,
total //以下载
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。