前言
目前有个需求是图片拍照上传的功能，但是我就是死活掉不起相机。。。总是打开的是文件目录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-inc.com/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 部分自带浏览器不兼容
- 微信 第一个实现的更好
兼容性测试
兼容浏览器包括：
QQ浏览器、微信、手淘、百度浏览器、UC
兼容手机包括：
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]);
},
附录：
美化样式文章链接~
http://www.haorooms.com/post/css_input_uploadmh