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 (
<Form onSubmit={this.handleSubmit}><FormItem label="附件">
<Upload {...props}
fileList={fileList}
onChange={this.onChange}
>
<Button>
<Icon type="upload" /> 上传附件
</Button>
</Upload>,
</FormItem>
<FormItem >
<Button type="primary" htmlType="submit" >
提交
</Button>
</FormItem>
</Form>
);
}
export default xxx;
代码可以用于新增功能和编辑功能,如有问题欢迎联系!不到之处多多指教
React实战之Ant Design—Upload上传_附件上传的更多相关文章
- Ant Design Upload 组件上传文件到云服务器 - 七牛云、腾讯云和阿里云的分别实现
在前端项目中经常遇到上传文件的需求,ant design 作为 react 的前端框架,提供的 upload 组件为上传文件提供了很大的方便,官方提供的各种形式的上传基本上可以覆盖大多数的场景,但是对 ...
- 2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用
一.主要任务:悉尼小程序管理后台,添加景点页面的开发 二.所遇问题及解决 1. 上传多个不同分类音频信息时,如中文音频和英文音频,要求音频不是放在一个数组中的,每个音频是一个独立的字段,此时: < ...
- React组件库Ant Design的安装与使用
一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...
- react 编写 基于ant.design 页面的参考笔记
前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...
- java 支持 超大上G , 多附件上传
首先 确定要上传的目录 WEB.XML 文件 Java代码 <listener> <listener-class><!-- 临时文件收集器 , 支持超大附件必须项 - ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- Ant design在vue,react的引入
文章地址: https://www.cnblogs.com/sandraryan/ 最近由于 一些不可描述的原因 要研究一下Ant design这个前端框架. 祭上官网: https://ant.de ...
- Ant Design Pro 脚手架+umiJS 实践总结
一.简介 1.Ant Design Pro Ant Design Pro是一款搭建中后台管理控制台的脚手架 ,基于React,dva.js,Ant Design (1)其中dva主要是控制数据流向,是 ...
- Ant Design(ui框架)
官方文档:https://ant.design/docs/react/introduce-cn 说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架.里面的组件很完善, ...
随机推荐
- HTML Imports & polyfill
组件化浏览器的兼容性问题汇总 框架依赖的 Web 标准技术 优先级高 HTML Imports HTML tempaltes ES6 to ES5 (搭建模块开发环境) polyfill https: ...
- [COJ0970]WZJ的数据结构(负三十)
[COJ0970]WZJ的数据结构(负三十) 试题描述 给你一棵N个点的无根树,点和边上均有权值.请你设计一个数据结构,回答M次操作. 1 x v:对于树上的每一个节点y,如果将x.y在树上的距离记为 ...
- [BZOJ2462] [BeiJing2011]矩阵模板(二维Hash)
传送门 二维哈希即可. 注意质数选的大一些,不然会超时. 还有插入的时候不判重居然比判重要快.. ——代码 #include <cstdio> int main() { ; ") ...
- poj——1422 Air Raid
Air Raid Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8577 Accepted: 5127 Descript ...
- 链表倒置,这个还是考验仔细程度,第一遍还没做对 —— 剑指Offer
https://www.nowcoder.net/practice/75e878df47f24fdc9dc3e400ec6058ca?tpId=13&tqId=11168&tPage= ...
- Hadoop HDFS NFS GateWay部署深入具体解释
目的:通过挂载的方式,能够相似訪问本地磁盘的方式一样的訪问Hadoop文件.简单.方便.快捷. 0.系统版本号&hadoop版本号 1)系统版本号 [root@WEB-W031 sbin]# ...
- what is Servlet Container[转载]
1 在这个博客中,我将描述一下web服务器.Servlet容器的基本概念,以及Servlet容器和jvm之间的关系.我想要证明的是Servlet容器不过就是一个java程序. 2 什么是web服务器 ...
- Java的Graphics中drawImage与drawLine的坐标区别
drawImage复制的区域是 dx1 <= x < dx2,dy1 <= y < dy2 drawLine绘制区域是 dx1 <= x <= dx2,dy1 &l ...
- 重新定义数据库历史的时刻——时间序列数据库Schwartz认为InfluxDB最有前途,Elasticsearch也不错
转自:http://www.infoq.com/cn/news/2017/04/redefine-database-history 提起VividCortex公司的创建者兼CEO Baron Schw ...
- 网络流之最大流算法(EK算法和Dinc算法)
最大流 网络流的定义: 在一个网络(有流量)中有两个特殊的点,一个是网络的源点(s),流量只出不进,一个是网络的汇点(t),流量只进不出. 最大流:就是求s-->t的最大流量 假设 u,v 两个 ...