antd Upload手动上传(react)
情况介绍
在antd官方提供的upload组件案例中,都使用了action属性直接上传,唯一手动上传的一个例子(如下图)也不够好用,可能不能满足项目的需求,所以我们需要对其进行一些修改,并加入一些别的方法。
我们经常会使用antd的form表单上传数据,有时就会需要同时上传图片。所以在这里我们需要实现的是,前端页面上传多张图片时,先存储在前端,当表单上传时,和表单数据一起上传到后端。
实现方法
1.初始化
首先,在最前面引入upload组件,
import { Button, Form, Input, message, Upload} from 'antd';
然后在form中加入upload,
this.state = {previewVisible: false,previewImage: '',fileList: [] //用来存图片列表};
<Form.Itemname="files"><UploadlistType="picture-card"headers={{ 'content-type': 'multipart/form-data' }}fileList={fileList} //存已上传到页面的图片列表onPreview={this.handlePreview} //点击文件链接或预览图标时的回调onChange={this.handleChange} //删除或者新上传时的回调beforeUpload={() => false} //上传文件之前的钩子,参数为上传的文件,若返回 `false` 则停止上传。我们采用手动上传。>{fileList.length >= 1 ? null : (<div><PlusOutlined /><div style={{ marginTop: 8 }}>上传</div></div>)}</Upload></Form.Item>
handlePreview = (file) => {this.setState({previewImage: file.thumbUrl,previewVisible: true});};
handleChange = ({ fileList }) => {this.setState({ fileList });};
2.上传表单和图片
这里我们统一使用json格式进行前后端的交互。由于在form表单中的图片格式是对象,但是我们不需要对象格式,我们需要的是fileList数组,所以,我们需要手动将每一张图片其加入到formData中。
onFinish = (values) => {const { fileList } = this.state;const formData = new FormData();delete values.files; //删除表单内的图片对象for (const key in values) {if (values[key] !== undefined && values[key] !== null) {formData.append(key, values[key]);}} //对于其他表单对象,可以直接上传fileList.forEach((item) => formData.append('files', utils.transferFile(item.thumbUrl)));};
3.图片回显
成功上传图片后,由于我这里后端给到前端的图片格式是base64,图片不能直接显示,但是还要考虑到,在_编辑_表单时,图片可能还会再上传,以下是我们的做法。 componentDidMount大家都知道是react生命周期在组件挂载在之后的函数吧,我们经常会将数据的一些预处理放在这里。
下面,我们首先需要调接口,获取后台数据。然后修改数据格式,将图片格式改成base64显示的格式,然后加入到fileList中,就可以将已经上传的图片重新加入到Upload组件中,实现回显。并且,后期再次上传时,也是可以的。
let { image } = res.data.data;let imgArr = image.map((item) => {return { thumbUrl: 'data:image/png;base64,' + item };});this.setState({fileList: imgArr});
antd Upload手动上传(react)相关推荐
- antd upload手动上传_antd 手动上传文件
先说我要实现的效果:我想用antd 的 upload 实现手动上传文件,上传文件时还有附加参数 我看了官网上说在beforeUpload中返回false,然后通过按钮点击事件触发上传. Q1:附加参数 ...
- antd upload手动上传_Flask上传文件
Flask上传文件 上传文件包括很多,比如用户头像,文章图片,文件分享等等,它也涉及到很多内容:上传文件,过滤文件类型,限制大小,文件名的编辑,拖拽上传,进度条,文件命名,文件目录的管理等等. 文件上 ...
- antd upload手动上传_SpringBoot 如何上传大文件?
最近遇见一个需要上传超大大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- antd upload手动上传_基于MVVCTP5的文件上传
现如今在市面上常见的web开发理念一般是两种,一种是MVC格式的,比较传统,而项目较大的开发,一般由团队完成,而MVC格式就显得有些不够合理 .于是 ,在这种情况下诞生了另外一种开发理念,我们叫MVV ...
- antd Upload组件上传状态一直处于uploading
antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...
- iview上传控件upload,手动上传控制
iview上传控件upload,手动上传控制 场景:实现不通过action地址自动上传,而是通过点击上传按钮手动上传的实现. 效果图: 以下是完整的代码: <template><di ...
- Upload手动上传文件
Upload上传文件有两种方式: 1.自动上传,即在选择文件后就立即调用后台接口: 自动上传需要在action中写入请求接口,然后再方法里面写入回调函数即可 2.手动上传,即在选择好文件之后不会立即上 ...
- React Antd Upload自定义上传customRequest
单独的上传图片接口要传参,action方式不太适合,需要使用自定义上传customRequest覆盖 公司代码不可弄,就发一个可用的demo例子 import React, { useState } ...
- antd Upload 自定义上传
需求 由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件 导致上传路径为空情况 解决办法 使用自定义上传 // 自定义上 ...
最新文章
- STM32cube HAL库 UART串口中断方式收发任意长度 调试笔记
- python 文件操作 os.mkdir()函数
- mysql数据开启远程登录,修改端口,开放防火墙端口
- C++:38---final关键字和禁止类继承
- 训练数据的分布对F-measure, recall 和 precision的影响
- php 解析lrc文件格式,PHP - 四级单词lrc文件解析为txt
- aix curl 安装_命令行下载工具(Curl)
- python 将图像变为矢量图(可字符和序列化)
- 解决Heritrix镜像方式存储路径中文乱码的解决方案
- 【学习笔记】monitor
- 处理WIN7任务栏通知区域图标异常问题
- jmeter性能测试步骤入门
- 阴阳师辅助(基于按键精灵)
- 2017ACM ICPC Asia Regional-Daejeon H-Rock Paper Scissors[ FFT]
- 人大金仓数据库KCA/KCP认证题库
- python双下划线什么意思_python中_、__、__xx__(单下划线、双下划线等)的含义
- A ConvNet for the 2020s
- 童趣诗 ——《所见》、《宿新市徐公店》、《小小的船》教学设计
- Windows系统win10系统看图pdf阅读器软件推荐
- oracle性能调优书,Oracle性能调优领域的百科全书
热门文章
- 给李开复:“创新工厂”最大的问题
- 改动实体类后,报错java.io.InvalidClassException: XXXDTO; local class incompatibl
- 基于VBS的恶搞/表白程序
- C51模拟PS2键盘(一)
- vue3最全路由使用教程
- 从零开始学递归与分治
- BZOJ2277 [Poi2011]Strongbox 【数论】
- Windows 11 修改本地账户名称
- 《Python编程 从入门到实践》简单读书笔记
- css应该写在html语言的哪个标记里,CSS布局的选择题