antd组件Upload实现自己上传

前言

在实现图片上传时，可能需要用到Upload，但是它默认的上传方式是加入图片后直接上传，如果要实现最后再一次性上传，需要自定义内容。

//添加按钮的样式
const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
 );


<Upload
              //样式
              className={styles['override-ant-btn']}
              //陈列样式，现在是卡片式
              listType="picture-card"
              //再图片上传到页面后执行的函数，自定义让他不执行
              beforeUpload={() => false}
              //数据，即图片，是一个数组
              fileList={fileList}
              //当点击查看时调用（上图的那个眼睛）
              onPreview={this.handlePreview}
              //数据改变时调用
              onChange={this.handleChange}
            >
              //当不少于一张图时，不显示怎加图片的按钮。
              {fileList.length >= 1 ? null : uploadButton}
            </Upload>

还有一个移除时调用的函数onRemove()，即点击上图的垃圾桶，这里没有定义。

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


        <Modal visible={visible} footer={null} onCancel={this.handleCancel}>
              <img alt="加载" style={{ width: '100%',height: '100%' }} src={previewImage} />
        </Modal>

利用Modal显示图片。

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

数据改变时直接重设fileList数组的值（我这里只有一张图可以这么做）。

最后是fileList的一些基本设置：

fileList: [{
          uid: 'id',
          name: '标题',
          //目前的状态
          status: 'done',
          //图片的url或者base64
          url: '',
          type: 'image/jpeg',
        }],