梨花寨－前端教程，开源分享，插件开发

基于微信API实现拍照上传示例分享

2018-06-07 11:25:20 | 浏览量：182 h5 微信

H5页面有轻便，灵活的优势，且可以借助于微信平台做低成本推广，得到的广泛的应用。不过纯页面在功能上受限，好在可以借助微信提供的APi实现更多功能，必然调用手机硬件功能，本文讲解下最常用的，H5页面调用微信API实现拍摄照片并上传的功能。

1、引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

2、前端页面对微信API初始化配置

需要获取微信js-sdk参数，具体获取方法参考另一篇文章微信JS-SDK数字签名生成方法（NodeJS版本）

wx.config({ 
   debug: false, // 开启调试模式
   appId: "$!{wxsign.get('appId')}", // 必填，公众号的唯一标识 
   timestamp: "$!{wxsign.get('timeStamp')}", // 必填，生成签名的时间戳 
   nonceStr: "$!{wxsign.get('nonceStr')}", // 必填，生成签名的随机串 
   signature: "$!{wxsign.get('signature')}",// 必填，签名，见附录1 
   jsApiList: ['checkJsApi', 
         'chooseImage', 
         'previewImage', 
         'uploadImage'] // 必填，需要使用的JS接口列表
 }); 
  
 var images = { 
  localId: [], 
  serverId: [] 
 };

3、拍照或从手机相册中选图接口

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  }
});

4、上传图片接口

注意，这里的上传是将图片上传到微信的服务器，有几天的缓存期，在这期间可以凭serverId获取。

wx.uploadImage({
  localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
  isShowProgressTips: 1, // 默认为1，显示进度提示
  success: function (res) {
    var serverId = res.serverId; // 返回图片的服务器端ID
  }
});

5、下载图片到自己的服务器

微信返回的serverid我们需要通过微信api获取真实的图片二进制数据。