react简易实现图片上传组件-从相机或文件夹上传

简单做了个图片上传的组件；

 <div className={styles.uploadImg_main}><inputstyle={{display:'none'}}ref={(el) => { this.input = el }}type='file'accept='image/*'onChange={this.handleImageChange}/><div onClick={this.addImage}>{this.state.imgUrl&&<img className={styles.show_img} src={this.state.imgUrl} />}<div className={styles.montmorillonite_text}>{this.props.msg}</div><div className={styles.montmorillonite}><div className={styles.montmorillonite_add} >+</div></div></div></div>

该功能主要通过 input标签实现：

<input type='file'  accept='image/*'/>

可以添加属性capture=“camera"仅通过相机上传，不通过文件。该属性还有"camcorder”，“microphone”，可以打开摄像机和录音机。
可以添加属性multiple="multiple"标识可接受多个值的文件上传字段。

  addImage = () => {this.input.click();//触发input：file的click事件，};showToast = (msg) => {Toast.info(msg);};handleImageChange = (e) => {//处理图片const saveUrl = this.props.saveUrl;const file = e.target.files[0];const windowURL = window.URL || window.webkitURL;//实现预览const dataURl = windowURL.createObjectURL(file);//硬盘或sd卡指向文件路径this.setState({imgUrl:dataURl});let param = new FormData(); //创建form对象param.append('file',file);this.props.dispatch({type:this.props.url,payload:{params:param,callback: (rsp) => {saveUrl(rsp.data);this.showToast("上传成功！");},errorCallBack: (rsp) => {this.showToast(rsp.msg);}}});};

通过硬盘或sd卡指向文件路径实现预加载功能。
实现效果图
未上传：
上传：

react简易实现图片上传组件-从相机或文件夹上传相关推荐

java 文件下载组件_java文件夹上传下载组件
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. *如何分片: *如何合成一个文件: *中断了从哪个分片开始. ...
基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载前言 js代码页面使用(我这里用的是uploader.jsp) CSS文件上传效果总结前言项目需求完成文件上传,可以拖拽上传文件/文 ...
svn取消文件夹图标_如何去掉svn文件夹上面的符号
如何去掉svn文件夹上面的符号如何去掉svn文件夹上面的符号第一步:建立一个名字叫做remove-svn-folders.reg的文本(先建立txt文件,然后粘贴内容后再修改文件名字),记得后缀要 ...
拖拽文件夹上传一（基于Vue的文件夹上传组件）
前言首先说一下,小弟第一次写文章,如果有什么错误还望小哥哥小姐姐多多包涵.如果有什么缺陷还望大家指出来让小弟多学习. 内容划分上传文件夹一共分两部分来写一方面怕太长了大家看五分钟就不想看 ...
vue文件夹上传组件选哪个好?
一. 功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传: 支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输 ...
SpringMVC文件夹上传解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
文件上传控件-如何上传文件-文件夹上传
需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...
vue文件夹上传源码
一. 功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传: 支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输 ...
Dropzone单文件上传、多文件上传、文件夹上传，springmvc接收，上传至Minio的一系列问题
0 前言 1.项目需要上传文件和大量的文件夹,页面只有一个input file标签会很丑,偶然间得知dropzone类库, 决定使用. 2. 项目后端采用springmvc接收,调用minio代码上传 ...

react简易实现图片上传组件-从相机或文件夹上传

react简易实现图片上传组件-从相机或文件夹上传相关推荐

最新文章

热门文章