背景:使用React的antd组件的Upload(官网),要求文件上传后,在点击提交时再将文件传过去。
技术点:
- 完全控制的文件上传。
- 可控制上传数量。
- 控制文件格式。
- 移除时的事件onRemove。
- 状态、数量改变onChange事件等。
- 是否带cookie,withCredentials: true。
- 提交时,originFileObj属性获取原始文件。
页面大致是这样:
Upload代码如下:
const [fileList, setFileList] = useState([]);
// upload属性
const uploadProps = {
name: 'file',
action: getFullUrl('/card/upload'),
withCredentials: true, // 文件上传时带cookie
onChange: handleChange,
onRemove: handleReset, // 点击文件后的小垃圾桶图标,移除
beforeUpload: (file) => {
const { name } = file;
// 校验是否是excel文件
const isExcel = /(xls|xlsx)$/i.test(name);
if (!isExcel) {
message.error(I18n.get('batch.card.upload.excel'));
}
// 自定义属性
file.isExcel = isExcel;
return isExcel;
},
};
// return中渲染:
<Upload {...uploadProps} fileList={fileList}>
<Button>
<Icon type="upload" />点击上传
</Button>
</Upload>
防止一次代码太长,分开写,处理函数可以根据具体需求定义。
上面代码中的具体函数:
const handleChange = ({ file, fileList }) => {
try {
const { status, response } = file;
// 刚才的子定义属性,是否是Excel文件,通过校验
if (!file.isExcel) {
return;
}
// 只能上传一个文件,不能用flie直接设置,onRemove函数会触发handleChange
setFileList(fileList.slice(-1));
if (status === 'error') {
throw new Error('上传失败');
}
if (status === 'done' && response) {
const { code } = response;
// ...
}
} catch (e) {
message.error(e.message);
}
};
// 这里是只有一个文件,移除即清空文件列表
const handleReset = () => {
setFileList([]);
};
// 点击提交,formData的形式传参
const handleSubmit = async () => {
try {
const formData = new FormData();
formData.append('file', fileList[0].originFileObj);
const res = await submitBatchFile(formData);
const { code } = res;
if (code !== '000000') {
throw new Error('提交失败');
}
message.success('提交成功');
} catch (e) {
console.error(e);
message.error(e.message);
}
};
收藏一下还能找到~
赞赏一下,请博主小姐姐喝果汁: