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

???????});

???}

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的React后台管理系统-file-uploader组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。