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

文章目录

    • 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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Cloud Alibaba【Nacos配置动态刷新、Nacos集群架构介绍 、Nacos的数据持久化、认识分布式流量防护 】(五)

目录 分布式配置中心_Nacos配置动态刷新 分布式配置中心_Dubbo服务对接分布式配置中心 分布式配置中心_Nacos集群架构介绍 分布式配置中心_Nacos的数据持久化 分布式配置中心_Nacos集群配置 分布式流量防护_认识分布式流量防护 分布式流量防护_认识Sentinel 分布式配置…

每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户

文章目录 每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户每日语录第26题 中级题: 活跃时长的均值1. 需求列表思路分析 答案获取加技术群讨论附表文末SQL小技巧 后记 每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户 大家好&#xff0c;我是Maynor。…

计组4——总线Plus IO

(CPU外部的)总线 用于连接computer3大模块(MC/GPUIO) CPU内部的片内总线判优由时序逻辑实现 composition& priority-judging 通信方式 CPU内部的片内总线用于取指、译码、执行、中断的数据通信&#xff1b; IO 总线分为控制线、数据线和地址线&#xff0c;对IO设备的…

python开发项目基于语音识别的智能垃圾分类系统的设计与实现

博主介绍&#xff1a;擅长Java、微信小程序、Python、Android等&#xff0c;专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不然下次找不到哟 Java项目精品实战案例…

基于Java+SpringBoot+Vue+Uniapp前后端分离考试学习一体机设计与实现(视频讲解,已发布上线)

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

mysql、redis 、RabbitMQ只能本机访问,怎么改?

如果只能本机访问&#xff0c;怎么改? 一、mysql - 改my.ini 刷脚本 bind-address0.0.0.0 然后重启一下mysql服务 任务管理器-关掉mysql 搜索 计算机管理-重启mysql服务 然后 打开查询&#xff0c;并选择mysql数据&#xff0c;输入这个sql语句&#xff0c;点击运行 sele…

状态模式:游戏、工作流引擎中常用的状态机是如何实现的?

从今天起&#xff0c;我们开始学习状态模式。在实际的软件开发中&#xff0c;状态模式并不是很常用&#xff0c;但是在能够用到的场景里&#xff0c;它可以发挥很大的作用。从这一点上来看&#xff0c;它有点像我们之前讲到的组合模式。 可以简短的回顾一下组合模式&#xff1a…

基于深度学习的高精度道路瑕疵检测系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度道路瑕疵&#xff08;裂纹&#xff08;Crack&#xff09;、检查井&#xff08;Manhole&#xff09;、网&#xff08;Net&#xff09;、裂纹块&#xff08;Patch-Crack&#xff09;、网块&#xff08;Patch-Net&#xff09;、坑洼块&#x…

flutter开发实战-生日等日期选择器DatePicker

flutter开发实战-生日等日期选择器DatePicker 在开发遇到设置生日等信息需要选择日期&#xff0c;这里用到的是CupertinoDatePicker iOS效果的日期、时间选择器 一、效果图 运行后效果图如下 二、代码实现 我们需要调用底部弹窗显示 //显示底部弹窗static void bottomShe…

怎么学习Java I/O相关的知识和技术? - 易智编译EaseEditing

要学习Java I/O&#xff08;输入输出&#xff09;相关的知识和技术&#xff0c;可以按照以下步骤进行&#xff1a; 理解Java I/O基础知识&#xff1a; 首先&#xff0c;了解Java I/O的基本概念和术语&#xff0c;包括输入流和输出流、字节流和字符流、文件读写等。掌握Java中…

TCP/IP网络编程 第十六章:关于IO流分离的其他内容

分离I/O流 两次I/O流分离 我们之前通过2种方法分离过IO流&#xff0c;第一种是第十章的“TCPI/O过程&#xff08;Routine&#xff09;分离”。这种方法通过调用fork函数复制出1个文件描述符&#xff0c;以区分输入和输出中使用的文件描述符。虽然文件描述符本身不会根据输入和输…

[极客大挑战 2019]PHP(反序列化)

介绍说明&#xff0c;有备份的习惯&#xff0c;找常见的备份文件后缀名 使用dirsearch进行扫描 dirsearch -u http://f64378a5-a3e0-4dbb-83a3-990bb9e19901.node4.buuoj.cn:81/ -e php-e 指定网站语言 扫描出现&#xff0c;www.zip文件 查看index.php <?php include c…

CSS——基础知识及使用

CSS 是什么 CSS是层叠样式表 (Cascading Style Sheets)的简写.CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。 基本语法规范 选择器 { 一条/N条声明 } 选择器决定针对谁修改 (找谁)声明决定修改啥. (干啥)声明的…

【复盘】记录一次类型不一致导致的Kafka消费异常问题

背景 业务主要是通过A系统向B系统写入Kafka&#xff0c;然后B系统消费Kafka 将结果写到Kafka中&#xff0c;A进行消费最终结果。 在整个流程中&#xff0c;A写入Kafka会写入一张 record1表记录&#xff0c;然后在A消费最终结果的时候也记录一张record2表。主要改动的话 只是B系…

Apache Doris (三十一):Doris 数据导入(九)Spark Load 4- 导入Hive数据及注意事项

目录 1. Spark Load导入Hive非分区表数据 2. Spark Load 导入Hive分区表数据 3. 注意事项 进入正文之前&#xff0c;欢迎订阅专题、对博文点赞、评论、收藏&#xff0c;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; 宝子们订阅、点赞、收藏不迷路&#xff01;抓紧…

C#委托相关知识

最开始学习C#的时候&#xff0c;简单的看过委托&#xff0c;最近工作中经常需要使用到委托。这篇笔记是对之前看过的委托的一个补充&#xff0c;也是对最近工作中遇到的委托的一个总结吧。 这里使用的是窗体程序作为例子。实例在文末&#xff0c;可下载。 委托是一个类&#xf…

使用Canal同步mysql数据到es

一、简介 Canal主要用途是基于 MySQL 数据库增量日志解析&#xff0c;提供增量数据订阅和消费。 当前的 canal 支持源端 MySQL 版本包括 5.1.x , 5.5.x , 5.6.x , 5.7.x , 8.0.x 二、工作原理 MySQL主备复制原理 MySQL master 将数据变更写入二进制日志( binary log, 其中记…

文本挖掘 day4 基于PMC知识框架文本挖掘的新能源汽车政策动态评价

基于PMC知识框架文本挖掘的新能源汽车政策动态评价 2. 研究设计2.1 研究技术路线2.2 数据采集2.3 动态分相 3. 基于PMC知识框架的策略动态挖掘3.1 PMC知识框架的建立3.2 基于PMC知识框架的策略挖掘字典3.2.1 字典建立步骤3.2.2 建立经验证据的词典 3.3 策略动态挖掘分析3.3.1 发…

力扣 452. 用最少数量的箭引爆气球

题目来源&#xff1a;https://leetcode.cn/problems/minimum-number-of-arrows-to-burst-balloons/description/ C题解1&#xff1a; 根据x_end排序&#xff0c;x_start小的在前&#xff0c;这样可以保证如果第 i 个球的x_end大于等于第 j 个球的x_start时&#xff0c;第 j 个球…

JavaWeb——基于Spring Boot的图书数字化管理系统的设计与实现

课程设计总结 1 概述 1.1 项目开发背景 随着信息技术的快速发展&#xff0c;数字化管理已经成为各行各业提高效率和管理水平的重要手段。在图书管理领域&#xff0c;数字化管理系统可以有效地提高管理效率&#xff0c;提供更好的用户体验。本项目旨在开发一个基于Spring…