关于antd上传限制只能上传图片

看别人的代码也是好的
多学习嘛

以下两种方法antd上传限制只能上传图片

用 getValueFromEvent: this.normFile,控制

<FormItem {...formItemLayout} label="客房图片" colon={false}>
              <div className="clearfix">
                {getFieldDecorator('pic',
                  {
                    valuePropName: 'fileList',
                    getValueFromEvent: this.normFile,
                    initialValue: info && info.img_path,
                  })(

                    <Upload
                      accept="image/*"
                      action="/admin/Media/upLoad"
                      headers={{authorization: getAdminInfo()}}
                      listType="picture-card"
                      onPreview={this.handlePreview}
                      onChange={this.handleChange}
                  >
                      <div>
                        <Icon type="plus" />
                        <div className="ant-upload-text">Upload</div>
                      </div>
                    </Upload>,
                )}
                <Modal visible={previewVisible} footer={null} onCancel={this.picCancel}>
                  <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
              </div>
            </FormItem>

 normFile = (e) => {
    // 检查图片类型
    // 只能上传三种图片格式
    const isJPG = e.file.type === 'image/jpeg';
    const isPNG = e.file.type === 'image/png';
    const isBMP = e.file.type === 'image/bmp';
    const isGIF = e.file.type === 'image/gif';
    const isWEBP = e.file.type === 'image/webp';
    const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP;
    if (!isPic) {
      message.error('只能上传图片');
      console.log(e.fileList);
      return e.fileList.filter((fileItem)=> e.file.uid !== fileItem.uid);
    } else {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    }
  };
  picCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleChange = ({fileList}) => {
    this.setState({
      fileList,
    } )
  };

方法2 用 fileList: […fileListD],控制

<FormItem
              label="  "
              {...formItemLayout}
              wrapperCol={{ span: 18 }}
              colon={false}
            >
              <div style={{ height: "100%" }}>
                <Upload
                  accept="image/*"
                  name="pic"
                  listType="picture-card"
                  {...uploadProp}
                  onPreview={this.handlePreview}
                  onChange={this.handleChange}
                  beforeUpload={this.beforeUpload}
                >
                  {fileList.length >= 5 ? null : uploadButton}
                </Upload>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                  <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
              </div>
            </FormItem>

const uploadProp = {
      fileList: [...fileListD],
      action: '/hq/home/Media/upLoad.hq',
      // headers: {
      //   authorization: window.localStorage.getItem(STORAGETOKENKEY),
      // },
    };

 // 图片上传
  handleCancel = () => this.setState({ previewVisible: false });
  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };
  handleChange = ({ fileList }) => {
    const img_id = [];
    if (fileList[fileList.length - 1]) {
      if (fileList[fileList.length - 1].status === 'done') {
        for (let i = 0; i < fileList.length; i++) {
          img_id.push(fileList[i].response.info.id);
        }
      }
    }

    for (let i = 0; i < fileList.length; i++) {
      const file = fileList[i];
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isGIF = file.type === 'image/gif';
      const isWEBP = file.type === 'image/webp';
      const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP;

      if (!isPic) {
        fileList = fileList.filter((fileItem)=> file.uid !== fileItem.uid);
      }
    }
    pic = img_id.toString();
    fileListD = fileList;
    this.setState({
      fileList,
    });
  };

  beforeUpload=(file, fileList) => {
    // 检查图片类型
    // 只能上传三种图片格式
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isBMP = file.type === 'image/bmp';
    const isGIF = file.type === 'image/gif';
    const isWEBP = file.type === 'image/webp';
    const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP;
    if (!isPic) {
      message.error('只能上传图片');
      this.setState({
        fileListD: fileList.filter((fileItem)=> file.uid !== fileItem.uid),
      });
      return false;
    }
    return isPic;
  };