ant react 上传_React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design—Upload上传_附件上传
Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看代码和注释,直接用就行
我直接放在form表单中,因为实战中单个附件上传很少几,乎都在form表单中加入一个附件上传所以为了更好的应用,我直接就放在form表单中应用
import React, { PureComponent } from 'react';
import {Form, Button, Icon,Upload} from 'antd';
const FormItem = Form.Item;
@Form.create()
class xxx extends PureComponent {
state = {
fileList: [],//存放上传信息:比如路径、文件名
imgList: [],//存放回显信息:修改时的路径、文件名
};
//form表单提交事件
handleSubmit = e => {
const { dispatch, form } = this.props;
e.preventDefault();
form.validateFieldsAndScroll((err, values) => {
if (!err) {
const { imgList } = this.state
values.imgList = JSON.stringify(imgList);
console.log('values', values);
}
});
};
//上传事件
onChange = ({ fileList }) => {
console.log('file', fileList);
let imgList = [];
fileList.map(function (item, key) {
if (item.response && item.response.success) {
console.log('item.response',item.response);
imgList.push({ url: item.response.url, Name: item.response.name });//这的参数具体看上传成功后返回的值,打印的item.response
} else {
//回显
if (item.url) {
//拼接'http:// 如果路径可以直接使用不需要拼接
imgList.push({ url: item.url.replace('http://', ""), Name: item.name });
}
}
});
this.setState({ fileList, imgList });
}
render() {
//const {form: { getFieldDecorator, getFieldValue }} = this.props;
const { fileList } = this.state
const props = {
name: 'UploadFile',//name得看接口需求,name与接口需要的name一致
action: 'http://.......',//接口路径
data: { },//接口需要的参数,无参数可以不写
multiple: true,//支持多个文件
showUploadList: true,//展示文件列表
}
return (
fileList={fileList}
onChange={this.onChange}
>
上传附件
,
提交
);
}
export default xxx;
代码可以用于新增功能和编辑功能,如有问题欢迎联系!不到之处多多指教
标签:const,form,imgList,Upload,Ant,item,上传,response
来源: https://www.cnblogs.com/Yu-Shuai/p/10870427.html
ant react 上传_React实战之Ant Design—Upload上传_附件上传相关推荐
- PHP上传文件缺省目录,帝国cms默认图片、附件上传路径/d/file/怎么修改
很多朋友问帝国CMS修改附件保存地址不生效如何解决,今天教大家如何将帝国CMS系统的默认文件存放路径/d/file/修改掉,这个功能到底怎么实现呢?这里涉及到后台设置和网站文件的修改,如果只更改后台附 ...
- 传智播客java博科学院怎么走_想去传智播客学习大家可不可以给的建议?
16 岁么 ... 我开始写程序的时候年龄比你小 ... 接触 web 编程时的年龄跟你一样 ... 那个年代的的学习远比现在困难 ... 因为中文网络还没有成型 ... 而以我一个初中生的英文水平完 ...
- python autoit获取网页ajax数据_WebDriver + Python 调用AutoIt例子(实现139邮箱写信页的附件上传)...
PS: 前提 1. 安装好webdriver下python实现的环境 2. 安装好Autoit(默认安装就可以了) 3. 另外需要一个139邮箱账号,脚本运行时上传的图片在附件里面 #coding:c ...
- SAP GOS附件上传与下载[代码直接可用]
在采购订单屏幕的左上角有个特殊的按钮,可以通过它创建.查看或删除采购订单的附件.这个按钮是使用GOS(Generic Object Service)工具实现的,可以把GOS理解为一个连接文档和SAP内 ...
- 微信小程序基于vant和springboot实现附件上传和预览
前言 图片上传和预览在移动端应用非常广泛和频繁,vant组件库van-uploader组件已经帮我们实现了大部分功能,但是在系统中频繁使用还是有点麻烦,我们根据自身的业务系统重新封装了一下简化我们的开 ...
- layui upload附件上传
1.layui upload 动态生成js // 附件上传 // elemId:上传button, elemFile:文件存放地址 function fileUpload(elemId,elemFil ...
- element 附件上传/文件上传组件
实例: 组件代码: <template><div><el-uploadclass="upload-demo"action="":a ...
- 附件上传功能测试用例
转载自:https://blog.csdn.net/u011159607/article/details/80144142 序号 测试用例名称 测试用例描述 步骤 预期结果 说明 1 附件上传-文件命 ...
- Ant Design Upload 自定义上传 customRequest
本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现 目录 Upload 常用属性和方法 默认上传 customRequest 自定义上传 Upload 自定 ...
最新文章
- 扩展LLVM:添加指令、内部函数、类型等
- C指针原理(4)-ATT汇编
- swfupload 进度条 提示 中文乱码
- 2017下半年网络规划设计师考试下午真题
- android 仿QQ手机版
- 黑苹果白果序列号_黑苹果从入门到放弃黑苹果:OC配置入门
- 【Spring第一篇】ClassPathXmlApplicationContext工作原理
- linux怎么启动ibus框架,fedora13 gnu/linux下 重启启动ibus输入法框架
- wordprss只显示一个当前主题 问题的解决
- python分布式定时任务_Python 定时任务框架 APScheduler 详解
- .NET Framework 4.7.2离线安装程序
- bs 网站获取电子秤重量方案
- 在团购网上空手赚钱项目,你敢做就敢赚!
- 微信公众号开发系列-玩转微信开发-目录汇总
- 7z压缩 lzma流式压缩、解压缩的实现 C语言
- 架构设计:系统间通信(36)——Apache Camel快速入门(上)
- js处理图片变形、方向、压缩等
- shell批量修改文件名
- UE4(虚幻4)基础:光照需要重建
- 通过身份证简单获取省市等信息
热门文章
- js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画
- 高德地图API之步行路线
- Python学习笔记:文件读/写方法汇总
- 【成长之路】JavaScript中,模拟 call 的底层实现
- 【Java】利用for循环打印心型
- 【Python】Python库之Web网站开发
- 某安全服务商发布会总结.md
- WeChat.app debuger
- Jmeter基本概念介绍
- 解决libreadline.so.6: cannot open shared object file: No such file or directory的问题