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

前言

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

所以对比了下

代码：

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

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

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

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

问题：

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

解决方法：

使用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