当前位置:   article > 正文

【react + antd】antd如何自定义请求使用antd的upload组件实现图片上传且可预览可删除_antd upload 上传图片

antd upload 上传图片

1. 效果展示

在这里插入图片描述
官网给出的案例无法使用封装好的请求方式上传图片,以及无法满足上传图片后获取接口url、名称等信息的的业务需求。这个时候需要用到customRequest这个api。
在这里插入图片描述
在这里插入图片描述

但是很遗憾,官网没有给出具体案例。
不过——博主自己试出来了<( ̄︶ ̄)>

2. customRequest如何使用?

要使用upload,特别重要的属性就是fileList文件列表,我们通过控制fileList的内容来显示清空图片列表。

const props = {
	const { fileList } = this.state
	onPreview: () => {
		// 这里一般写调取预览弹窗,点图片上的小眼睛后触发
	}onRemove: ()=> {
	 // 这里清除,我们一般给fileList空数组实现清除效果
	 this.setState({fileList: []})
	},
	customRequest: val => {
		// 这里可以调用您自定义封装的请求...
		// 这一步十分重要!!!决定你的图片是否正常使用该组件的预览功能!!!
		val.file.status = 'done';
		val.file.url = '这里填写从接口获取到上传到服务器的链接'
		// 执行这句后,图片列表可以看到有图片了
		this.setState({fileList: [val.fileList]})
	},
	fileList // upload 必不可少的属性
}
return (
	<Upload {...props }></Upload>
)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

特别注意:

在这里插入图片描述

fileList 数组中每一个对象的url必须存在,才能触发图片预览时间,不然眼睛是灰色的无法点击的
在这里插入图片描述

3. 控制上传时什么时候使用customRequest,什么时候选择beforeUpload方法?

需要额外的事件才触发图片上传到服务器上使用beforeUpload,反之customRequest

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/339148
推荐阅读
相关标签
  

闽ICP备14008679号