前言

在实现图片上传时，可能需要用到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',        }],

来源：