React后台管理系统-file-uploader组件
1.React文件上传组件github地址: https://github.com/SoAanyip/React-FileUpload
2.Util里边新建file-uploader文件夹,里边新建index.jsx
- import React from 'react';
- import FileUpload from './react-fileupload.jsx';
- class FileUploader extends React.Component{
- render(){
- const options={
- baseUrl :'/manage/product/upload.do',
- fileFieldName : 'upload_file',
- dataType : 'json',
- chooseAndUpload : true,
- uploadSuccess : (res) => {
- this.props.onSuccess(res.data);
- },
- uploadError : (err) => {
- this.props.onError(err.message || '上传图片出错啦');
- }
- }
- return (
- <FileUpload options={options}>
- <button className="btn btn-xs btn-default" ref="chooseAndUpload">请选择图片</button>
- </FileUpload>
- )
- }
- }
- export default FileUploader;
3.在save.jsx里边使用FileUploader组件
- <div className="form-group">
- <label className="col-md-2 control-label">商品图片</label>
- <div className="col-md-10">
- {
- this.state.subImages.length ? this.state.subImages.map(
- (image, index) => (
- <div className="img-con" key={index}>
- <img className="img" src={image.url} />
- <i className="fa fa-close" index={index} onClick={(e) => this.onImageDelete(e)}></i>
- </div>)
- ) : (<div>请上传图片</div>)
- }
- </div>
- <div className="col-md-offset-2 col-md-10 file-upload-con">
- <FileUploader onSuccess={(res) => this.onUploadSuccess(res)}
- onError={(errMsg) => this.onUploadError(errMsg)}/>
- </div>
- </div>
4.图片上传成功后执行nUploadSuccess函数,更新state里边subImages数据
- //上传图片成功
- onUploadSuccess(res){
- let subImages = this.state.subImages;
- subImages.push(res);
- this.setState({
- subImages : subImages
- });
- }
5.删除图片
- // 删除图片
- onImageDelete(e){
- let index = parseInt(e.target.getAttribute('index')),
- subImages = this.state.subImages;
- subImages.splice(index, 1);
- this.setState({
- subImages : subImages
- });
- }
React后台管理系统-file-uploader组件的更多相关文章
- React后台管理系统-添加商品组件
引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MU ...
- React后台管理系统- rc-pagination分页组件封装
1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...
- React后台管理系统-首页Home组件
1.Home组件要显示用户总数.商品总数和订单总数,数据请求后端的 /manage/statistic/base_count.do接口,返回的是 this.state = { u ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 【共享单车】—— React后台管理系统开发手记:主页面架构设计
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式 ...
- 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...
- 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 《React后台管理系统实战 :三》header组件:页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数
一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header. ...
- 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- thinkphp5使用phpmailer发送邮件
1.首先让邮箱开启smtp服务,本案例使用163的SMTP服务器: smtp.163.com发送邮件 2.下载phpmailer,在tp项目里的extends文件夹下新建一个文件夹phpmailer, ...
- kvm磁盘io优化以及性能测试以及与物理机对比
ubuntu下kvm的磁盘io性能优化步骤 1.virsh shutdown wcltest2 2.virsh edit wcltest2 <driver name='qemu' type='q ...
- mysql CPU占用高
https://blog.csdn.net/u011239989/article/details/72863333 QPS高,sql简单的场景下, 需要 1. 提高数据库的服务器性能CPU 内存等 2 ...
- C# Task任务详解及其使用方式
https://blog.csdn.net/younghaiqing/article/details/81455410 C#多线程编程笔记(4.3)-Task任务中实现取消选项 https://blo ...
- k8s的ingress使用
ingress 可以配置一个入口来提供k8s上service从外部来访问的url.负载平衡流量.终止SSL和提供基于名称的虚拟主机. 配置ingress的yaml: 要求域名解析无误 要求servic ...
- B. Tell Your World
http://codeforces.com/contest/849/problem/B 题目是给出n个点,要求把这n个点分成两组,每组都是一条直线.而且这两组不能为空,还要是平行的. 思路: 对于前3 ...
- Soup协议-即普通post请求,内容域xml
1.基础问题 1.1 soup-Simple Object Access Protocal简单对象访问协议 a).承载在http协议之上,http支持传输img/html/文件等,soup请求和响应域 ...
- mfc 列表控件
经常使用的mfc控件:list control,记录下 首先将list control拖入到对话框中,然后命名ID,通过类向导,类型为control,控件变量名(m_showlist), vie ...
- HTML5 有哪些不同类型的存储?
HTML 5 支持本地存储,在之前版本中是通过 Cookie 实现的.HTML5 本地存储速度快而且安全. 有两种不同的对象可用来存储数据: localStorage 适用于长期存储数据,浏览器关闭后 ...
- mysql通用分页存储过程遇到的问题
DELIMITER $$ USE `tsb_asksys`$$ DROP PROCEDURE IF EXISTS `P_viewPage`$$ CREATE DEFINER=`root`@`local ...