共计 986 个字符，预计需要花费 3 分钟才能阅读完成。
前言
在实现图片上传时，可能需要用到 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’,
}],
