Antd的Upload组件上传文件控制文件数量、格式等，以及提交时如何获取文件

背景：使用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, // 文件上传时带cookieonChange: 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函数会触发handleChangesetFileList(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);}};

Antd的Upload组件上传文件控制文件数量、格式等，以及提交时如何获取文件相关推荐

antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
antd Upload组件上传状态一直处于uploading
antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...
element-ui upload组件上传文件类型限制
element-ui upload组件上传文件类型限制 <el-uploadclass="c-upload"ref="upload":action=&q ...
ant design Upload组件上传文件类型
Upload组件上传文件类型设置 1.设置上传文件类型为excel <template><a-uploadname="file":multiple="t ...
vue前端直接使用element-ui的upload组件上传到阿里云OSS存储
因为公司的服务器比较拉吧,所以老大决定将数据文件等上传到阿里云服务器,通过ali-oss方式,这样的话读取文件也比较快 (能看到这说明什么安装element-ui都会了,我就不详细介绍了,直接跳过) ...
使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件
最初使用该组件实现图片上传是没有问题的,前后端配合,最终实现想要的效果,组件使用过代码如下: 将文件拖到此处,或点击上传现在改为使用该组件实现Excel文件上传,组件的使用几乎是不变的,代码如下: ...
element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
Vue：使用elementUI upload组件上传excel文件
<template><div><el-upload dragaction="" :http-request="upload" :b ...
使用element-ui的upload组件上传代码包时遇到的问题及总结
1.在工作中使用element-ui的upload组件时,遇到一个问题就是这个upload会自动发送一个http请求,即使你使用了http-request自定义上传覆盖默认上传函数,也会导致在控制台里 ...

Antd的Upload组件上传文件控制文件数量、格式等，以及提交时如何获取文件

Antd的Upload组件上传文件控制文件数量、格式等，以及提交时如何获取文件相关推荐

最新文章

热门文章