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

news2024/10/6 20:32:41

文章目录

    • 1. 效果展示
    • 2. customRequest如何使用?
      • 特别注意:
    • 3. 控制上传时什么时候使用customRequest,什么时候选择beforeUpload方法?

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>
)

特别注意:

在这里插入图片描述

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/767933.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用模板创建【vite+vue3+ts】项目出现 “找不到模块‘vue‘或其相应的类型声明” 的解决方案

问题描述 项目前台需要使用Vue3Ts来写一个H5应用&#xff0c;然后我用模板创建 npm create vitelatest vue3-vant-mobile -- --template vue-ts创建完后进入HelloWorld.vue&#xff0c;两眼一黑 解决办法一 npm i --save-dev types/node然后在tsconfig.json的"compi…

【ARM Cortex-M 系列 1 -- Cortex-M0, M3, M4, M7, M33 差异】

文章目录 Cortex-M 系列介绍Cortex-M0/M0 介绍Cortex-M3/M4 介绍Cortex-M7 介绍Cotex-M33 介绍 下篇文章&#xff1a;ARM Cortex-M 系列 2 – CPU 之 Cortex-M7 介绍 Cortex-M 系列介绍 Cortex-M0/M0 介绍 Cortex-M0 是 ARM 公司推出的一款微控制器&#xff08;MCU&#xff0…

Golang跨平台UI框架之Wails(二)

上一篇文章我们讲解了如何简单创建一个 wails 的项目,但是现在有很多前端框架我们可以选择,比如: AngularVueSvelteReactLitVanilla各个都是时代的弄潮儿,就看哪一个适合你了,后续的系列都是以Angular为例。 1. 创建Angular模板项目 由于 wails 是没有官方支持Angular的…

代码随想录算法训练营之JAVA|第六天| 454. 四数相加 II

今天是第6天刷leetcode&#xff0c;立个flag&#xff0c;打卡60天。 算法挑战链接 454. 四数相加 IIhttps://leetcode.cn/problems/4sum-ii/ 第一想法 理解题目&#xff1a;找到四个数相加等于0 ——> 找到两个互为相反的数 理解完题目之后&#xff0c;那么我们要做的就…

IP首部报文字段

一、IP首部报文字段 字段如下图所示 二、每个字段的含义 版本 表示 IP 协议的版本。通信双方使用的 IP 协议版本必须一致。目前广泛使用的IP协议版本号为 4&#xff0c;即 IPv4 首部长度 这个字段所表示数的单位是 32 位字长&#xff08;1 个 32 位字长是 4 字节&#xff0…

设计模式-组合模式在Java中的使用示例-杀毒软件针对文件和文件夹进行杀毒

场景 组合模式 组合模式(Composite Pattern)&#xff1a; 组合多个对象形成树形结构以表示具有“整体—部分”关系的层次结构。 组合模式对单个对象&#xff08;即叶子对象&#xff09;和组合对象&#xff08;即容器对象&#xff09;的使用具有一致性&#xff0c; 组合模式…

不会接口测试?用Postman轻松入门 —— Postman实现get和post请求

测试行业现在越来越卷&#xff0c;不会点接口测试好像简历都已经拿不出手了&#xff0c;但很多小伙伴都会头疼&#xff1a;接口测试应该怎么入门&#xff1f;那么多的接口测试工具应该学哪个&#xff1f; 其实&#xff0c;接口测试工具&#xff0c;就像吃饭用的筷子&#xff0…

25.JavaWeb-接口文档Swagger

1.Swagger swagger是一款可以根据resutful风格生成的生成的接口开发文档&#xff0c;并且支持做测试的一款中间软件。 1.1 接口文档 接口文档是用于描述API的一份文档&#xff0c;它包含了API的详细信息&#xff0c;包括API的请求和响应参数、接口路径、请求方法、数据类型、返…

企企通入选《2023数字化采购发展报告》,持续赋能企业数字化采购

近日&#xff0c;国内知名产业数字化服务平台亿邦智库联合中国物流与采购联合会公共采购分会共同发布了《2023数字化采购发展报告》。 企企通一直以来积极推动企业采购供应链数字化升级和变革&#xff0c;不断通过技术、产品、服务的创新&#xff0c;引领国内采购供应链数字化的…

保持领先竞争对手,从普通变为非凡;为您的Android应用赋能数据结构和算法

数据结构和算法为Android开发提供了基础数据存储和处理的工具。开发者可以根据具体需求选择合适的数据结构和算法&#xff0c;以提高应用的性能、效率和用户体验。Android框架也提供了许多内置的数据结构和算法实现&#xff0c;如Bundle、ArrayAdapter等&#xff0c;以便开发者…

开发工具篇第二十六讲:使用IDEA进行本地调试和远程调试

开发工具篇第二十六讲&#xff1a;使用IDEA进行本地调试和远程调试 Debug用来追踪代码的运行流程&#xff0c;通常在程序运行过程中出现异常&#xff0c;启用Debug模式可以分析定位异常发生的位置&#xff0c;以及在运行过程中参数的变化&#xff1b;并且在实际的排错过程中&am…

【Visual Studio Code】---自定义键盘快捷键设置

概述 一个好的文章能够帮助开发者完成更便捷、更快速的开发。书山有路勤为径&#xff0c;学海无涯苦作舟。我是秋知叶i、期望每一个阅读了我的文章的开发者都能够有所成长。 一、进入键盘快捷键设置 1、进入键盘快捷键设置方法1 使用快捷键进入键盘快捷键设置先按 Ctrl K再…

k8s如何访问 pod 元数据

如何访问 pod 元数据 **我们在 pod 中运行容器的时候&#xff0c;是否也会有想要获取当前 pod 的环境信息呢&#xff1f;**咱们写的 yaml 清单写的很简单&#xff0c;实际上部署之后&#xff0c; k8s 会给我们补充在 yaml 清单中没有写的字段&#xff0c;那么我们的 pod 环境信…

【软件测试】Git 实战详解 - 分支详细,看这篇就够了.,..

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Git 是如何保存数…

【项目 进程3】2.6 exce函数族 2.7 进程退出、孤儿进程、僵尸进程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 2.6 exec函数族介绍&#xff08;execute 执行&#xff09;exec函数族 2.7 进程退出、孤儿进程、僵尸进程进程退出孤儿进程僵尸进程 2.6 exec函数族介绍&#xff08;…

线程系列3-关于 CompletableFuture

线程系列3-关于 CompletableFuture 1、从 Future 接口说起2、CompletableFuture 对 Future 的改进2.1、CompletionStage 接口类2.2、runAsync 和 supplyAsync 创建子任务2.3、 whenComplete 和 exceptionally 异步任务回调钩子2.4、调用 handle() 方法统一处理异常和结果2.5、异…

计讯物联智慧景区应用解决方案,开启交互式智慧旅游新篇章

方案背景 后疫情时代&#xff0c;旅游市场逐步回暖。随着游客的旅游需求趋向个性化、多元化&#xff0c;景区的数字化转型升级势在必行。在此背景下&#xff0c;计讯物联充分发挥5G、云计算、物联网、大数据等技术的应用价值&#xff0c;以技术创新推动业务创新&#xff0c;面…

基于springboot+webservice+mysql实现的物业报修管理系统

基于springbootWebservicemysql实现的物业报修管理系统 一、系统介绍二、功能展示1.添加报修单(业主)2.缴费(业主)3.确定修复(管理员) 三、其它系统四、获取源码 一、系统介绍 系统主要功能&#xff1a; 通过JaxWsDynamicClientFactory调用Webservice接口实现物业报修管理。 业…

Linux·从 URL 输入到页面展现到底发生什么?

打开浏览器从输入网址到网页呈现在大家面前&#xff0c;背后到底发生了什么&#xff1f;经历怎么样的一个过程&#xff1f;先给大家来张总体流程图&#xff0c;具体步骤请看下文分解&#xff01; 总体来说分为以下几个过程: DNS 解析:将域名解析成 IP 地址TCP 连接&#xff1a…

【VUE】拖动侧边栏以便自由调整左右两侧的宽度

效果 &#xff08;1&#xff09;拖动前 &#xff08;2&#xff09;拖动后 主要代码 <template><el-row class"contnet" :gutter"20">// 1. 左侧树<el-col id"left-tree" class"left-tree" :offset"0" :…