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
});
}

更多专业前端知识，请上【猿2048】www.mk2048.com

React后台管理系统-file-uploader组件相关推荐

React后台管理系统-首页Home组件
1.Home组件要显示用户总数.商品总数和订单总数,数据请求后端的 /manage/statistic/base_count.do接口,返回的是 this.state = { u ...
React后台管理系统-品类选择器二级联动组件
React后台管理系统-品类选择器二级联动组件品类选择器二级联动 posted on 2018-06-26 22:21 gisery 阅读( ...) 评论( ...) 编辑收藏
【开发篇】10分钟快速搭建React后台管理系统模板
React后台管理系统模板 github 我又回来了!!!学完前端react,再学spring,这周或者下周写spring有关的!!! 一.准备React 1.建立react应用 npx create ...
P6-Vue3后台管理系统-构建业务组件连通公共组件
P6-Vue3后台管理系统-构建业务组件连通公共组件 1.概述这篇文章我们将创建业务模块,并且与公共组件进行连通. 2.构建业务模块 2.1.构建Home 2.2.构建VideoManage 2.3 ...
从头开始react后台管理系统-安装ant-Design
从头开始react后台管理系统-安装ant-Design introduce 在做微信小程序, 想着顺便做一个管理系统的随便扯扯我是个菜鸡,很菜很菜的菜鸡,春招各家凉,现在还是0offer.心情很 ...
react后台管理系统项目总结
React后台管理项目 1.创建一个项目 2.配置一个ui插件库开始实现跳转快速获取路由地址将路由和组件映射 axios请求实现登录模块隐藏二级路由按照价格排序或者按照销量等排序管理员 ...
React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div classN ...
《React后台管理系统实战：十一》可视图表及首页图表
一.简介及环境安装 les135- 1.常用数据可视化图表库 1) echarts a. https://echarts.baidu.com/ b. 百度开源, 如果要在 react 项目中使用, 需 ...
《React后台管理系统实战：五》产品管理（二）：产品添加页面及验证等、富文本编辑器、提交商品
一.产品添加基础部分 1 home.jsx点添加按钮动作跳转到添加商品页点击:onClick={() => this.props.history.push('/product/add-upda ...

React后台管理系统-file-uploader组件

React后台管理系统-file-uploader组件相关推荐

最新文章

热门文章