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

文章目录

    • [1. 效果展示](#1. 效果展示)
    • [2. customRequest如何使用?](#2. customRequest如何使用?)
    • [3. 控制上传时什么时候使用customRequest,什么时候选择beforeUpload方法?](#3. 控制上传时什么时候使用customRequest,什么时候选择beforeUpload方法?)

1. 效果展示

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

但是很遗憾,官网没有给出具体案例。

不过------博主自己试出来了<( ̄︶ ̄)>

2. customRequest如何使用?

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

javascript 复制代码
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>
)

特别注意:

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

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

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

相关推荐
zwjapple2 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说5 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem5 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术5 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing5 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall6 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴6 小时前
简单入门Python装饰器
前端·python