React後臺管理系統-file-uploader組件
阿新 • • 發佈:2018-06-26
soa field spa type parseint nds efault 刪除 component
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
- }
- }
- 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
- });
- }
React後臺管理系統-file-uploader組件