React-Hzero-UI上传附件使用体验

需求：对上传文件数量限制一个

Hzero-UI 官网：添加链接描述

  state = {
    fileList: [],
    uuid: '',
  }

beforeUpload 对文件大小和数量进行限制

  beforeUpload = file => {
    if (file) {
      const isTt20M = file.size / 1024 / 1024 < 20;
      if (!isTt20M) {
        notification.error({
          message: intl.get('hiam.userInfo.view.message.fileSizeError').d('文件不能超过2M'),
        });
        return false;
      }
    }

    const list = this.state.fileList;
    const isExist = list.some(item => item === this.state.uuid);
    if (isExist) {
      notification.error({
        message: intl.get('hiam.userInfo.view.message.fileCountsError').d('只能上传一个附件'),
      });
      return false;
    }
  }

列表渲染

      {
        title: intl.get(`ssrc.ZeKuPrice.model.Upload`).d('附件'),
        dataIndex: 'attachmentUuid',
        width: 100,
        fixed: 'right',
        render: (val, record) =>
          !selectedRow.includes(record) ||
          !['TO_BE_SUBMITTED', 'APPROVE_REJECTED'].includes(record.transformStatus) ? (
            <span style={{ fontSize: '12px', color: '#bdbdbd' }}>附件操作</span>
          ) : (
            <Upload
              attachmentUUID={record.attachmentUuid}
              {...uploadProps}
              single
              beforeUpload={this.beforeUpload}
              //上传成功回调
              onUploadSuccess={() => {
                fileList.push(uuid);
                this.setState({
                  fileList: [...new Set(fileList)],
                });
                this.changeGroupValue(uuid, 'attachmentUuid', record);
              }}
              //删除成功的回调
              removeCallback={() => {
                this.changeGroupValue(null, 'attachmentUuid', record);
                const list = fileList;
                const newList = list.filter(item => item !== uuid);
                this.setState({
                  fileList: newList,
                });
              }}
              afterOpenUploadModal={uid => {
               
                if (record.attachmentUuid) {
                 // 查看已有的附件 保存id对其限制
                  fileList.push(record.attachmentUuid);
                  this.setState({
                    fileList: [...new Set(fileList)],
                  });
                }
                this.setState({
                  uuid: uid,
                });
              }}
            />
          ),
      }