【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;
    }

有问题欢迎在评论区提出讨论,谢谢!

  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值