【移动端实现】相机唤起及图片上传功能（包括微信）

前言

目前有个需求是图片拍照上传的功能，但是我就是死活掉不起相机。。。总是打开的是文件目录OR上传图片。。。。而不是相机。。。

所以对比了下

代码：

参考了百度移动端实现方式。。。代码很简单，对就这一句！

<input type="file" accept="image/*" onChange={this.choosePhoto}/>

其他实现方式 增加mutiple ，但是兼容性不好，部分华为手机不兼容

<input type="file" multiple accept="image/*" onChange={this.choosePhoto} />

更新实践：accept="image/*" 会导致加载页面效果缓慢，所以除了微信以为调用下面的方式

<input className="upload-photo-input" type="file" accept="image/jpeg,image/jpg,image/png" onChange={this.choosePhoto} />

采坑：手机淘宝客户端兼容方式

问题：

手机淘宝 默认屏蔽了包括 吊起相机、文本复制等功能

解决方法：

使用WindVane相关方式，链接：http://h5.alibaba-/api/WindVane-API.html

代码：

// 打开淘宝环境的相机setTaobaoPhoto(e, self) {document.addEventListener('WVPhoto.Event.takePhotoSuccess', function(e) {// alert('event takePhotoSuccess: ' + JSON.stringify(e.param));// 吊起相机后，进入“上传中”状态，防止用户多次点击相机self.setState({isUpload: true,});});// let self = this;var params = {// 得到照片后是否自动上传type: '1',// 得到照片后的上传方式v: '2.0',// 是否只允许拍照或从相册选择mode: 'both',// 业务代码bizCode: 'mtopupload',// 将图片数据使用 Base64 格式返回// needBase64: true,// 图片标识// identifier: '34345455q5q'};// alert('params: ' + JSON.stringify(params));window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {if (e.resourceURL) {alert('takePhoto resourceURL: ' + JSON.stringify(imgUrl));}// alert('takePhoto success: ' + JSON.stringify(e));}, function(e) {// alert('takePhoto failure: ' + JSON.stringify(e));// 失败时调用函数，取消上传中的状态self.failSet();});},

实践：

1> IOS没问题~效果赞

2>安卓机部分有问题

小米 满分 都可以实现华为 50 部分自带浏览器不兼容微信 第一个实现的更好

兼容性测试

兼容手机包括：IPhone7, IPhone6s, 华为P8Max，小米5，OPPO R9, vivo Xplay5A，小米 MI5，魅族 note2，乐视 X900

上传代码：

choosePhoto: function(e) {e.preventDefault();let files;if (e.dataTransfer) {files = e.dataTransfer.files;} else if (e.target) {files = e.target.files;}const reader = new FileReader();reader.onload = () => {this.setState({srcUrl: reader.result});};reader.readAsDataURL(files[0]);},

附录：

美化样式文章链接~ /post/css_input_uploadmh