react+antd+upload 使用一

1.电脑系统 windows11专业版
2.开发环境 react16+antd4
3.在项目开发的时候，我们会需要在上传的时候做一些限制，下面我来分享一下。
4.template:

<Upload
  listType="picture-card"
  className="avatar-uploader"
  fileList={hotImgFileList}
  showUploadList={{
    showPreviewIcon: true,
    showDownloadIcon: false,
    showRemoveIcon: true,
  }}
  customRequest={(options) => {
    UploadCustomRequest(options, {
      type: 'bgImg',
      FileSize: 1,
      fileType: ['png', 'jpg', 'jpeg'],
      fileTypeValue: '.png、.jpg、.jpeg',
    });
  }}
  beforeUpload={(file) => {
    beforeUpload(file, {
      type: 'bgImg',
      FileWidth: 750,
      FileHeight: 0,
      fileWidthValue: '750*0',
    });
  }}
  >

5.mathods:

const beforeUpload = (file, data) => {
    const width = data.FileWidth;
    const height = file.FileHeight;
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.addEventListener(
        'load',
        () => {
          let img = new Image();
          img.src = reader.result;
          img.onload = () => {
            if (img.width < width || img.height < height) {
              data.FileHeight == 0
                ? message.error(`请上传宽大于等于 ${data.FileWidth} 的封面图！`)
                : message.error(`请上传宽高大于等于 ${data.fileWidthValue} 的封面图！`);
              reject(`请上传宽高大于等于 ${data.fileWidthValue} 的封面图！`);
            } else {
              resolve();
            }
          };
        },
        false,
      );
      reader.readAsDataURL(file);
    });
  };

const UploadCustomRequest = (options, data) => {
    // console.log(options);
    console.log(options.file);
    console.log(data);

    const fileType = options.file.name.split('.');
    const fileDate = fileType.slice(-1);
    const isFileSize = options.file.size / 1024 / 1024 < data.FileSize;
    let IsFileType = false;

    if (data.fileType.indexOf(fileDate[0]) < 0) {
      IsFileType = false;
      message.error(`仅支持图片格式：${data.fileTypeValue}格式图片!`);
      return Upload.LIST_IGNORE;
    } else {
      IsFileType = true;
    }

    !isFileSize && message.error(`上传图片大小不能超过${data.FileSize}M!`) && Upload.LIST_IGNORE;
  };

6.本期的分享到这里就结束啦，希望对你有所帮助，让我们一起努力走向巅峰。