React后台管理系统-file-uploader组件

Posted wangyawei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React后台管理系统-file-uploader组件相关的知识,希望对你有一定的参考价值。

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组件的主要内容,如果未能解决你的问题,请参考以下文章

react+react-router+mobx+element打造管理后台系统---react-amdin-element

react 高效高质量搭建后台系统 系列

用React+AntD写单车后台管理系统资源下载

element中file-upload组件的提示‘按delete键可删除’,怎么去掉

react学习之搭建后台管理系统

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