1.React文件上传组件github地址: https://github.com/SoAanyip/React-FileUpload

2.Util里边新建file-uploader文件夹,里边新建index.jsx

  1. import React from 'react';
  2. import FileUpload from './react-fileupload.jsx';
  3.  
  4. class FileUploader extends React.Component{
  5.     render(){
  6.         const options={
  7.             baseUrl :'/manage/product/upload.do',
  8.             fileFieldName : 'upload_file',
  9.             dataType : 'json',
  10.             chooseAndUpload : true,
  11.             uploadSuccess : (res) => {
  12.                 this.props.onSuccess(res.data);
  13.             },
  14.             uploadError : (err) => {
  15.                 this.props.onError(err.message || '上传图片出错啦');
  16.             }
  17.         }
  18.         return (
  19.             <FileUpload options={options}>
  20.                 <button className="btn btn-xs btn-default" ref="chooseAndUpload">请选择图片</button>
  21.             </FileUpload>
  22.         )
  23.     }
  24. }
  25. export default FileUploader;

3.在save.jsx里边使用FileUploader组件

  1. <div className="form-group">
  2.                       <label className="col-md-2 control-label">商品图片</label>
  3.                       <div className="col-md-10">
  4.                       {
  5.                             this.state.subImages.length ? this.state.subImages.map(
  6.                                   (image, index) => (
  7.                                   <div className="img-con" key={index}>
  8.                                       <img className="img" src={image.url} />
  9.                                       <i className="fa fa-close" index={index} onClick={(e) => this.onImageDelete(e)}></i>
  10.                                   </div>)
  11.                               ) : (<div>请上传图片</div>)
  12.                           }
  13.                       </div>
  14.                       <div className="col-md-offset-2 col-md-10 file-upload-con">
  15.                       <FileUploader onSuccess={(res) => this.onUploadSuccess(res)}
  16.                               onError={(errMsg) => this.onUploadError(errMsg)}/>
  17.                       </div>
  18.                   </div>

4.图片上传成功后执行nUploadSuccess函数,更新state里边subImages数据

  1. //上传图片成功
  2.   onUploadSuccess(res){
  3.       let subImages = this.state.subImages;
  4.       subImages.push(res);
  5.       this.setState({
  6.           subImages : subImages
  7.       });
  8.   }

5.删除图片

  1. // 删除图片
  2.     onImageDelete(e){
  3.        let index = parseInt(e.target.getAttribute('index')),
  4.            subImages = this.state.subImages;
  5.        subImages.splice(index, 1);
  6.        this.setState({
  7.            subImages : subImages
  8.        });
  9.    }

React后台管理系统-file-uploader组件的更多相关文章

  1. React后台管理系统-添加商品组件

    引入了CategorySelector 二级联动组件.FileUploader图片上传组件和RichEditor富文本编辑组件 import React from 'react'; import MU ...

  2. React后台管理系统- rc-pagination分页组件封装

    1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...

  3. React后台管理系统-首页Home组件

    1.Home组件要显示用户总数.商品总数和订单总数,数据请求后端的 /manage/statistic/base_count.do接口,返回的是 this.state = {            u ...

  4. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  5. 【共享单车】—— React后台管理系统开发手记:主页面架构设计

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  6. react后台管理系统路由方案及react-router原理解析

        最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置. 实现原理剖析 1.hash的方式   ...

  7. 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱

    一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...

  8. 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  9. 《React后台管理系统实战 :三》header组件:页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数

    一.布局及排版 1.布局src/pages/admin/header/index.jsx import React,{Component} from 'react' import './header. ...

  10. 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

随机推荐

  1. windows cmd命令 mkdir生成多个文件bug问题

    [问题现象] 有这样一个bat脚本,目的是为了根据时间创建文件夹 执行后却发现生产的文件夹有两个,名字被分开了,很是纳闷,一度以为自己哪里写错了 [问题原因] 经过查阅资料,一点一点的定位.发现是因为 ...

  2. List、Set

    List.Set List.Set List.Set List.Set List.Set List.Set List.Set

  3. 存储引擎:MySQL系列之七

    一.MyISAM存储引擎 缺点: 不支持事务 最小粒度锁:表级 读写相互阻塞,写入不能读,读时不能写 不支持MVCC(支持多版本并发控制机制) 不支持聚簇索引 不支持数据缓存 不支持外键 崩溃恢复性较 ...

  4. BZOJ 3673 可持久化并查集 by zky && BZOJ 3674 可持久化并查集加强版 可持久化线段树

    既然有了可持久化数组,就有可持久化并查集.. 由于上课讲过说是只能按秩合并(但是我也不确定...),所以就先写了按秩合并,相当于是维护fa[]和rk[] getf就是在这棵树中找,直到找到一个点的fa ...

  5. 华东交通大学2017年ACM“双基”程序设计竞赛 1008

    Problem Description 长度为 n 的序列,把它划分成两段非空的子序列,定义权值为:两段子序列的最大值的差的绝对值.求可能的最大的权值.数据范围:2 <= n <= 10^ ...

  6. maven插件: shade, assembly

    shade插件的作用: 通过版本的exclution无法解决jar冲突的问题, 解决方案是把依赖的包打到本model的jar中,打包的时候由mvn plugin自动修改代码中的依赖jar包名 relo ...

  7. 带图片的word快速插入到博客中

    最近在博客中写文章的时候,最烦的就是将word文档整体传到博客中,不能一次把图片粘贴上去,再次去添加图片的时候要截图还要找对位置才可上传,偶尔的机会在网上看到有人这么处理,挺好用的,这里我也做个备注. ...

  8. @Requestbody@ApiParam @PathVariable @RequestParam三者区别

    一.问题描述 由于项目是前后端分离,因此后台使用的是spring boot,做成微服务,只暴露接口.接口设计风格为restful的风格,在get请求下,后台接收参数的注解为RequestBody时会报 ...

  9. Sqoop概述

    sqoop Sqoop 是传统数据库与 Hadoop 之间数据同步的工具,它是 Hadoop 发展到一定程度的必然产物,它主要解决的是传统数据库和Hadoop之间数据的迁移问题.这节课我们将详细介绍 ...

  10. 《从0到1学习Flink》—— Flink 中几种 Time 详解

    前言 Flink 在流程序中支持不同的 Time 概念,就比如有 Processing Time.Event Time 和 Ingestion Time. 下面我们一起来看看这几个 Time: Pro ...