前言

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

//添加按钮的样式

const uploadButton = (

);

//样式

className={styles['override-ant-btn']}

//陈列样式，现在是卡片式

listType="picture-card"

//再图片上传到页面后执行的函数，自定义让他不执行

beforeUpload={() => false}

//数据，即图片，是一个数组

fileList={fileList}

//当点击查看时调用(上图的那个眼睛)

onPreview={this.handlePreview}

//数据改变时调用

onChange={this.handleChange}

>

//当不少于一张图时，不显示怎加图片的按钮。

{fileList.length >= 1 ? null : uploadButton}

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

handlePreview = (file) => {

this.setState({

previewImage: file.url || file.thumbUrl,

visible: true,

});

};

利用Modal显示图片。

handleChange = ({ fileList }) => {

this.setState({ fileList });

};

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

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

fileList: [{

uid: 'id',

name: '标题',

//目前的状态

status: 'done',

//图片的url或者base64

url: '',

type: 'image/jpeg',

}],