热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

React图片输入框移动端网页_018

React-图片输入框-移动端网页gitHub地址觉得有参考价值,点个赞https:github.comxiaopingzh…目录结构.├──README.md├──dist│├─
React-图片输入框-移动端网页
  • gitHub地址 觉得有参考价值,点个赞

https://github.com/xiaopingzh…

目录结构

.
├── README.md
├── dist
│ ├── bundle.js
│ └── index.html
├── package.json
├── src
│ ├── components
│ │ ├── ErrorPage
│ │ │ ├── ErrorPage.css
│ │ │ └── ErrorPage.js
│ │ ├── Notice
│ │ │ ├── Notice.css
│ │ │ └── Notice.js
│ │ ├── PersonalUploadFileForm
│ │ │ ├── PersonalUploadFileForm.css
│ │ │ └── PersonalUploadFileForm.js
│ │ ├── SuccessPage
│ │ │ ├── SuccessPage.css
│ │ │ └── SuccessPage.js
│ │ └── common
│ │ ├── actions.js
│ │ ├── getUrlpargm.js
│ │ └── utils.js
│ ├── index.html
│ ├── index.js
│ └── page
│ ├── UploadForm.js
│ └── upLoadForm.css
├── webpack.config.js
└── webpack.production.config.js

上传组件代码

基于原生的API接口,点击输入输入框 手机上会出现 文件 相机选项
可自行选择拍照上传,
为解决微信内置上传的bug 其中accept 设置为 accept="image/*"

loading组件找了一个简单的动效

npm config set '@bit:registry' https://node.bit.dev
npm i @bit/davidhu2000.react-spinners.pulse-loader

来源

https://bit.dev/davidhu2000/r…

import React from 'react';
import './PersonalUploadFileForm.css';
import toast from '../Notice/Notice';
import PulseLoader from '@bit/davidhu2000.react-spinners.pulse-loader';
class PersonalUploadFileForm extends React.Component {
constructor(props) {
super(props);
this.state = {
filePreviewUrl: this.props.value ? this.props.value.base64 : '',
overSizeModel: false,
};
}
selectFile = e => {
e.preventDefault();
this.refs.fileinput.click();
};
_handleFileChange = e => {
e.preventDefault();
let reader = new FileReader();
let file = e.target.files[0];
reader.Onloadend= () => {
if (file.type != 'image/jpeg' && file.type != 'image/png') {
toast('请选择图片',"error");
return false;
}
if (file.size > 8000000){
toast('图片太大,请重新选择',"error");
return false;
}
this.setState({
filePreviewUrl: reader.result,
});
this.props.onChange({ name: file.name, base64: reader.result });
};
reader.readAsDataURL(file);
e.target.value = null;
};
render() {
let { filePreviewUrl } = this.state;
let { backimg, textTip, displaybackimg, uploading } = this.props;
return (





{uploading ? (
className="img-preshow-loading"
0.7"
}}
>




) : (
src={displaybackimg ? filePreviewUrl : backimg}
100%', height: '100%' }}
/>
)}



type="file"
ref="fileinput"
OnChange={this._handleFileChange}
none' }}
accept="image/*"
/>


{textTip && {textTip}}

);
}
}
export default PersonalUploadFileForm;

《React-图片输入框-移动端网页_018》

— 选择图片

《React-图片输入框-移动端网页_018》

-上传失败提示

《React-图片输入框-移动端网页_018》

《React-图片输入框-移动端网页_018》

《React-图片输入框-移动端网页_018》

《React-图片输入框-移动端网页_018》


推荐阅读
  • 本项目在Java Maven框架下,利用POI库实现了Excel数据的高效导入与导出功能。通过优化数据处理流程,提升了数据操作的性能和稳定性。项目已发布至GitHub,当前最新版本为0.0.5。该项目不仅适用于小型应用,也可扩展用于大型企业级系统,提供了灵活的数据管理解决方案。GitHub地址:https://github.com/83945105/holygrail,Maven坐标:`com.github.83945105:holygrail:0.0.5`。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 在稀疏直接法视觉里程计中,通过优化特征点并采用基于光度误差最小化的灰度图像线性插值技术,提高了定位精度。该方法通过对空间点的非齐次和齐次表示进行处理,利用RGB-D传感器获取的3D坐标信息,在两帧图像之间实现精确匹配,有效减少了光度误差,提升了系统的鲁棒性和稳定性。 ... [详细]
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • 利用PaddleSharp模块在C#中实现图像文字识别功能测试
    PaddleSharp 是 PaddleInferenceCAPI 的 C# 封装库,适用于 Windows (x64)、NVIDIA GPU 和 Linux (Ubuntu 20.04) 等平台。本文详细介绍了如何使用 PaddleSharp 在 C# 环境中实现图像文字识别功能,并进行了全面的功能测试,验证了其在多种硬件配置下的稳定性和准确性。 ... [详细]
  • 深入解析JWT的实现与应用
    本文深入探讨了JSON Web Token (JWT) 的实现机制及其应用场景。JWT 是一种基于 RFC 7519 标准的开放性认证协议,用于在各方之间安全地传输信息。文章详细分析了 JWT 的结构、生成和验证过程,并讨论了其在现代 Web 应用中的实际应用案例,为开发者提供了全面的理解和实践指导。 ... [详细]
  • 结语 | 《探索二进制世界:软件安全与逆向分析》读书笔记:深入理解二进制代码的逆向工程方法
    结语 | 《探索二进制世界:软件安全与逆向分析》读书笔记:深入理解二进制代码的逆向工程方法 ... [详细]
  • 从无到有,构建个人专属的操作系统解决方案
    操作系统(OS)被誉为程序员的三大浪漫之一,常被比喻为计算机的灵魂、大脑、内核和基石,其重要性不言而喻。本文将详细介绍如何从零开始构建个人专属的操作系统解决方案,涵盖从需求分析到系统设计、开发与测试的全过程,帮助读者深入理解操作系统的本质与实现方法。 ... [详细]
  • 微信支付授权目录配置详解及操作步骤
    在使用微信支付时,若通过WeixinJSBridge.invoke方法调用支付功能,可能会遇到“当前页面URL未注册”的错误提示,导致get_brand_wcpay_request:fail调用微信JSAPI支付失败。为解决这一问题,需要正确配置微信支付授权目录,确保支付页面的URL已成功注册。本文将详细介绍微信支付授权目录的配置步骤和注意事项,帮助开发者顺利完成支付功能的集成与调试。 ... [详细]
  • 本文详细介绍了如何在Linux系统中搭建51单片机的开发与编程环境,重点讲解了使用Makefile进行项目管理的方法。首先,文章指导读者安装SDCC(Small Device C Compiler),这是一个专为小型设备设计的C语言编译器,适合用于51单片机的开发。随后,通过具体的实例演示了如何配置Makefile文件,以实现代码的自动化编译与链接过程,从而提高开发效率。此外,还提供了常见问题的解决方案及优化建议,帮助开发者快速上手并解决实际开发中可能遇到的技术难题。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 2019年后蚂蚁集团与拼多多面试经验详述与深度剖析
    2019年后蚂蚁集团与拼多多面试经验详述与深度剖析 ... [详细]
  • MVVM架构~mvc,mvp,mvvm大话开篇
    返回目录百度百科的定义:MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方:ControllerPresenter负责逻辑的处理,Model提供数据,View负责显示。作为一种新的模 ... [详细]
  • 提升工作效率:掌握这些技巧,IDEA 使用效率翻倍 | IDEA 高效操作指南
    提升工作效率:掌握这些技巧,IDEA 使用效率翻倍 | IDEA 高效操作指南 ... [详细]
  • 本章节深入探讨了 Webpack 命令的高级功能,涵盖了官方快速入门教程中未涉及的细节。通过实际操作和案例分析,对官方文档进行了详细解读与补充,帮助读者更好地理解和应用这些进阶技巧。 ... [详细]
author-avatar
紫夜丶月
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有