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