【React】Antd Upload组件的常用属性以及在表单Form中的使用

目录

一.常见属性的介绍

二.上传文件后如何点击文件就自动下载对应文件呢？

三.upload在表单中如何做到数据回显，即配置初始化文件列表数据？

四.如何修改文件列表的样式达到以下效果， 不同后缀名的文件显示对应的图标，超过3行显示滚动条，空间上显示3.5行？

---

一.常见属性的介绍

1.beforeUpload

文件上传之前的钩子，可以通过第一个形参file查看上传的文件信息（例如查看文件名、文件大小等进行校验），通常我们可以在这个函数中进行文件信息的校验，例如查看用户上传的文件名是否合法，文件大小是否超出限制等等，如果不想要上传这个文件可以返回“Upload.LIST_IGNORE”,返回false或者Promise.reject(file)，文件的上传状态status为error，返回Promise.resolve(file)则返回对应的文件信息

  // 示例
  const beforeUpload = (file) => {
    console.log('beforeUpload:', file, file.name, file.name.indexOf(','));
    const isLt2M = file.size / 1024 / 1024 <= 2;
    if (!isLt2M) {
      // message.error('图片不能大于 2MB!');
      return Upload.LIST_IGNORE;
    }
    if (file.name.indexOf(',') !== -1) {
      // message.error('文件名不能含,');
      return Upload.LIST_IGNORE;
    }
    return Promise.resolve(file);
  };

2.defaultFileList

默认已经上传的文件列表，值得注意的是，当我们给Upload组件设置这个属性的时候，如果没有继续上传或删除文件，表单Form提交的时候Upload里面的数据是undefined

3.fileList

已经上传的文件列表，值得注意的是，表单提交的时候就是返回fileList内的数据

4.action

文件上传的路径，上传成功后文件信息会在fileList中显示

5.onChange

上传文件时的回调，通常可以在这里获取第二个形参fileList，用state保存结果

二.上传文件后如何点击文件就自动下载对应文件呢？

可以在Upload的onChange函数对第二个形参fileList进行map设置每一个文件的url

在Form表单中可以通过props.onChange来改变form表单中Upload组件这一项的返回值

  const handleOnChange = (info) => {
    // 通过status判断文件已上传成功
    for (const file of info.fileList) {
      if (file.status !== 'done') return;
    }
 
    // 在Form表单中可以通过props.onChange来改变form表单中Upload组件这一项的返回值
    props.onChange &&
      props.onChange(
        info?.fileList?.map((item) => {
          return {
            ...item,
            // 文件下载的路径可以和后端进行沟通 我们是/download/ + 文件id 为下载地址
            url: '/download/' + item?.response?.record?.fileId,
            fileId: item?.response?.record?.fileId,
            fileName: item?.response?.record?.fileName,
          };
        }),
      );
  };

三.upload在表单中如何做到数据回显，即配置初始化文件列表数据？

通过设置defaultFileList属性，其中uid要求唯一，status应该写done代表已经下载完成，name是文件名，url即点击文件时触发下载操作

const defaultFileList = [
  {
    uid: '1',
    name: 'xxx.png',
    status: 'done',
    url: 'http://www.baidu.com/xxx.png',
  },
  {
    uid: '2',
    name: 'xxxx.png',
    status: 'done',
    url: 'http://www.baidu.com/xxxx.png',
  },
]

倘若要在Form表单中进行正确回显，需要注意的是我们应当监听传入defaultFileList的改变，将defaultFileList的值返回给表单Form

  useEffect(() => {
    // 在Form表单中可以通过props.onChange来改变form表单中Upload组件这一项的返回值
    props.onChange && props.onChange(props.defaultFileList);
  }, [defaultFileList]);

四.如何修改文件列表的样式达到以下效果， 不同后缀名的文件显示对应的图标，超过3行显示滚动条，空间上显示3.5行？

需求1 不同后缀名的文件显示对应的图标

需求2 超过3行显示滚动条，空间上显示3.5行

解决1

文件列表中span元素中有title属性，我们可以根据这个title属性，利用属性选择器，设置伪元素

默认图标的样式通过display: none令其隐藏

    .ant-upload-text-icon {
      display: none;
    }
 
    .ant-upload-list-item-name {
      position: relative;
      width: 216px;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      padding-left: 42px;
 
      &::after {
        position: absolute;
        content: '';
        background-size: auto;
        display: block;
        width: 20px;
        height: 20px;
        top: 6px;
        left: 10px;
      }
 
      &[title$='.xlsx'],
      &[title$='.xls'] {
        &::after {
          background-image: url(./img/img-excel.png);
        }
      }
 
      &[title$='.pdf'] {
        &::after {
          background-image: url(./img/img-pdf.png);
        }
      }
    }

 解决2

max-height: 3.5行高度 + overflow:auto

    .ant-upload-list.ant-upload-list-text {
      width: 100%;
      max-height: 114px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      height: auto;
      overflow: auto;
    }
 
    .ant-upload-list-item.ant-upload-list-item-done.ant-upload-list-item-list-type-text {
      height: 32px;
    }

有问题欢迎在评论区提出讨论，谢谢！