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

Posted 清颖~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Antd的Upload组件上传文件控制文件数量格式等,以及提交时如何获取文件相关的知识,希望对你有一定的参考价值。

背景:使用React的antd组件的Upload(官网),要求文件上传后,在点击提交时再将文件传过去。
技术点:

  1. 完全控制的文件上传。
  2. 可控制上传数量。
  3. 控制文件格式。
  4. 移除时的事件onRemove。
  5. 状态、数量改变onChange事件等。
  6. 是否带cookie,withCredentials: true。
  7. 提交时,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);
    
  ;

以上是关于Antd的Upload组件上传文件控制文件数量格式等,以及提交时如何获取文件的主要内容,如果未能解决你的问题,请参考以下文章

antd的upload组件上传功能踩坑

antd Upload组件 onChange接收不到后续状态的问题

Antd Upload组件上传文件至php后端, php拿到对应的文件名(二: vue实现)

Antd Upload组件上传文件至php后端, php拿到对应的文件名(二: vue实现)

antd upload上传格式.doc.docx.pdf.png.jpg.rar和大小100兆限制

antd的Upload组件 在安卓机上直接打开相册