React后台管理手动封装图片上传组件
分为两个文件夹,index.js(逻辑文件) styled.js(样式文件)
index.js文件,编写完成之后在对应的地方引入即可
import React from "react"
import { UploadContainer } from "./styled"
import { Icon ,message} from "antd"
import { fetch as fetchPro } from "whatwg-fetch"
class Upload extends React.Component {
constructor(props) {
super(props)
this.state = {
imgUrl: ""
}
if (this.props.value) {
this.state.imgUrl = this.props.value
}
}
render() {
let { imgUrl } = this.state
return (
<UploadContainer>
<input type="file" onChange={this.handleUpdate.bind(this)} ref="files" />
<div className="imgContent">
{imgUrl ? <img src={imgUrl} /> : <Icon type="plus" style={{ fontSize: 26 }} />}
</div>
</UploadContainer>
)
}
async handleUpdate() {
let fileImg = this.refs.files.files[0]; let formData = new FormData() formData.append("filesImg", fileImg)//第一个参数为后端规定字段,第二个参数时需要上传的图片 let data = await fetchPro("/ajax/upload/files", {
method: "post",
body: formData
}).then(res => res.json())//第一个参数为地址,第二个参数为配置项
if(data.data.urlPath){
this.setState({
imgUrl:data.data.urlPath
})
}else{
message.error(data.data.info)
}
}
} export default Upload
styled.js文件
import styled from "styled-components" export const UploadContainer = styled.div`
width:110px;
height:110px;
border:1px dashed #ccc;
position:relative;
input{
opacity:0;
width:110px;
height:100%;
position:absolute;
left:0;
top:0;
z-index:2;
}
.imgContent{
padding:5px;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
display:flex;
justify-content:center;
align-items:center;
img{
width:100%;
height:100%;
}
}
`
React后台管理手动封装图片上传组件的更多相关文章
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 基于Node的React图片上传组件实现
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...
- 分享一个react 图片上传组件 支持OSS 七牛云
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...
- vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...
- H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- 前端nginx+Java后台ftp处理页面图片上传踩坑
今天,将前端代码部署到服务器nginx上,在测试多图片上传时,报错413请求体空间太大,请求都没到后台,直接被nginx拦截,调整后又报错504. 整体而言,前端存在两处问题: 413 错误 :Req ...
- 图片上传组件webuploader
前端组件webuploader 当时也是搞了很久参考这种demo,但是没记.现在事后大致总结下.直接上大概代码(我使用asp.net MVC来做的): 执行顺序:(get)Record/Add——A ...
- vux-uploader 图片上传组件
1.网址:https://github.com/greedying/vux-uploader 2.安装 npm install vux-uploader --save npm install --sa ...
随机推荐
- Elasticsearch7.X 入门学习第一课笔记----基本概念
原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...
- Webpack和Gulp对比
Webpack和Gulp对比 作者 彬_仔 关注 2016.10.19 22:42* 字数 8012 阅读 2471评论 18喜欢 68 在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并 ...
- webpack之给目录起别名
1. 配置文件目录: build>webpack.base.config.js: resolve: { alias: { '@': resolve('src'), //照猫画虎 'styles' ...
- v-cloak解决Vue双大括号闪烁问题
相信不少人和我一样,初次查看一个技术的文档的时候,知识吸收的很慢,因为对这个技术的不熟悉导致不清楚各种操作的应用场景,当我意识到这件事之后,我决定换种学习思路,即以实战为主,卡壳就查文档,会对这个技术 ...
- load 和 initialize 的区别
官方文档 Apple的官方文档很清楚地说明了 initialize 和 load 的区别在于: load 是只要类所在文件被引用就会被调用,而 initialize 是在类或者其子类的第一个方法被调用 ...
- thinkphp 数据库连接报错 SQLSTATE[HY000] [2002] No such file or directory
https://blog.csdn.net/tornge/article/details/51388233 找到mysql sokcet的路径 vim /etc/mysql/mysql.conf.d/ ...
- AIX系统软件安装问题
一.安装软件时一定要cd到介质目录中 二.选择accept new licence 三.更新系统时避免使用updata_all,要手动选择出要更新的软件 四.oracle11G的rac还要用到open ...
- django之类视图
一:类视图 1. 为什么使用类视图? # 以注册请求逻辑为例 def register(request): if request.method == "GET": render(r ...
- Web自动化-浏览器驱动chromedriver安装方法
1.python中安装好selenium包 pip install selenium 2.根据以下驱动对照表下载Chrome对驱动 chromedriver版本 支持的Chrome版本 v2.3 ...
- ssd_mobilenet_demo
操作系统:windows 10 64位 内存:8G GPU:Nvidia MX 150 Tensorflow: 1.4 1.安装python Anaconda3-5.0.1 ,默认python版本( ...