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‘;
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組件