React后台管理系统-file-uploader组件
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
-
});
-
}
AOP和IOC的实现原理(用到的设计模式)
字符串里有数字和字符,如何只获取一种(以数字为例)
maven的搭建
java中递归的方法的实例
从零开始学习oracle
各个浏览器的webdriver
“equals”有值 与 “==”存在 “equals”只是比较值是否相同,值传递,==地址传递,null==a,避免引发空指针异常,STRING是一个对象==null,对象不存在,str.equals("")对象存在但是包含字符‘''
Oracle基础入门
orcale => 含义