前言
目前有个需求是图片拍照上传的功能,但是我就是死活掉不起相机。。。总是打开的是文件目录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