React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react antd upload

react+antd+upload结合使用示例

作者:灰太狼的情与殇

这篇文章主要为大家介绍了react+antd+upload结合使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

电脑系统 windows11专业版

开发环境 react16+antd4

在项目开发的时候,我们会需要在上传的时候做一些限制,下面我来分享一下。

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',
    });
  }}
  >

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

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

以上就是react+antd+upload 使用的详细内容,更多关于react+antd+upload 使用的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文