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.    }