antd组件Upload实现自己上传

红太狼 2022-04-08 13:43 806阅读 0赞

## 前言 ##

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

![20181218130930754][]

![20181218130930783][]

//添加按钮的样式
    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',
            }],

来源：[https://segmentfault.com/a/1190000017404796][https_segmentfault.com_a_1190000017404796]

[20181218130930754]: /images/20220404/50c24cbcf14c46d0a02b97e0a1a5a22d.png
[20181218130930783]: /images/20220404/a6d652425b894def8a578d5269c1aff4.png
[https_segmentfault.com_a_1190000017404796]: https://segmentfault.com/a/1190000017404796