分为两个文件夹,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后台管理手动封装图片上传组件的更多相关文章

  1. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  2. 基于Node的React图片上传组件实现

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...

  3. 分享一个react 图片上传组件 支持OSS 七牛云

    react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...

  4. vue图片上传组件

    前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...

  5. H5拍照、选择图片上传组件核心

    背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

  6. Jquery图片上传组件,支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  7. 前端nginx+Java后台ftp处理页面图片上传踩坑

    今天,将前端代码部署到服务器nginx上,在测试多图片上传时,报错413请求体空间太大,请求都没到后台,直接被nginx拦截,调整后又报错504. 整体而言,前端存在两处问题: 413 错误 :Req ...

  8. 图片上传组件webuploader

    前端组件webuploader 当时也是搞了很久参考这种demo,但是没记.现在事后大致总结下.直接上大概代码(我使用asp.net  MVC来做的): 执行顺序:(get)Record/Add——A ...

  9. vux-uploader 图片上传组件

    1.网址:https://github.com/greedying/vux-uploader 2.安装 npm install vux-uploader --save npm install --sa ...

随机推荐

  1. Elasticsearch7.X 入门学习第一课笔记----基本概念

    原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...

  2. Webpack和Gulp对比

    Webpack和Gulp对比 作者 彬_仔 关注 2016.10.19 22:42* 字数 8012 阅读 2471评论 18喜欢 68 在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并 ...

  3. webpack之给目录起别名

    1. 配置文件目录: build>webpack.base.config.js: resolve: { alias: { '@': resolve('src'), //照猫画虎 'styles' ...

  4. v-cloak解决Vue双大括号闪烁问题

    相信不少人和我一样,初次查看一个技术的文档的时候,知识吸收的很慢,因为对这个技术的不熟悉导致不清楚各种操作的应用场景,当我意识到这件事之后,我决定换种学习思路,即以实战为主,卡壳就查文档,会对这个技术 ...

  5. load 和 initialize 的区别

    官方文档 Apple的官方文档很清楚地说明了 initialize 和 load 的区别在于: load 是只要类所在文件被引用就会被调用,而 initialize 是在类或者其子类的第一个方法被调用 ...

  6. 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/ ...

  7. AIX系统软件安装问题

    一.安装软件时一定要cd到介质目录中 二.选择accept new licence 三.更新系统时避免使用updata_all,要手动选择出要更新的软件 四.oracle11G的rac还要用到open ...

  8. django之类视图

    一:类视图 1. 为什么使用类视图? # 以注册请求逻辑为例 def register(request): if request.method == "GET": render(r ...

  9. Web自动化-浏览器驱动chromedriver安装方法

    1.python中安装好selenium包  pip install selenium 2.根据以下驱动对照表下载Chrome对驱动   chromedriver版本 支持的Chrome版本 v2.3 ...

  10. ssd_mobilenet_demo

    操作系统:windows 10  64位 内存:8G GPU:Nvidia MX 150 Tensorflow: 1.4 1.安装python Anaconda3-5.0.1 ,默认python版本( ...