媒介
在完成图片上传时,能够须要用到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',
}],