关于react.js:reactantdupload-使用一

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. 本期的分享到这里就完结啦，心愿对你有所帮忙，让咱们一起致力走向巅峰。