antd组件Upload实现自己上传的实现示例

antd组件组件Upload实现自己上传的实现示例实现自己上传的实现示例

主要介绍了antd组件Upload实现自己上传的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参

考。一起跟随小编过来看看吧

前言前言

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

需要自定义内容。

//添加按钮的样式

const uploadButton = (

//样式

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

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

listType="picture-card"

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

beforeUpload={() => false}

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

fileList={fileList}

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

onPreview={this.handlePreview}

还有一个移除时调用的函数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>

fileList: [{

uid: 'id',

name: '标题',

//目前的状态

status: 'done',

//图片的url或者base64

url: '',

type: 'image/jpeg',

}],

PS:基于基于antd的上传文件进度条的上传文件进度条