微信公众号H5开发——调用相册和摄像头并上传服务器

之前的文章介绍了关于微信JSSDK调用，下面介绍一下其中的一个最常用的功能——调用相册和摄像头

使用此功能之前先参考：微信JSSDK

在通过了config接口验签成功之后，我们就可以调用微信JSSDK的方法了

1、config配置成功

// 通过config接口注入权限验证配置，可查阅微信公众平台接口进行配置 
        wx.config({
            debug: false,
            appId: appId,
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature,
            jsApiList:[
	            'chooseImage',
	            'uploadImage',
	            'getLocalImgData',
	            'downloadImage'
            ],// 必填，需要使用的JS接口列表 声明
        });
        
        wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: [
                        'chooseImage',
                        'previewImage',
                        'uploadImage',
                        'downloadImage'
                    ],
                    success: function (res) {
                        if (res.checkResult.getLocation == true) {
                            wxChooseImage();
                        }
                    }
                });
            });
            wx.error(function(res){
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                alert("验证失败，请重试！");
            });
        

2、调用相册和摄像头

wx.chooseImage({
        count: 1, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
        success: function (res) {
          let localIds = res.localIds; // 返回选定照片的本地ID列表（手机上操作就是手机端的ID列表，是一个数组），localId可以作为img标签的src属性显示图片
          wx.uploadImage({
            localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (result) {
              let serverId = result.serverId; // 返回图片的服务器端ID
              // 可以将serverId传给后台，用于存放在自己服务器上
            }
          });
        },
        fail: function() {},
        complete: function() {}
});

3.上传到微信服务器

function wxChooseImage() {
            wx.chooseImage({
                success: function(res) {
                    var localId = res.localIds; 
                    function upload() {
                        //图片上传
                        wx.uploadImage({
                            localId: localId[i],
                            success: function(res) {
                                var serverId = res.serverIdl;
                                //图片上传完成之后，进行图片的下载，图片上传完成之后会返回一个在腾讯服务器的存放的图片的ID--->serverId
                                wx.downloadImage({
                                    serverId: res.serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        var localId = res.localId; // 返回图片下载后的本地ID
 
                                        //通过下载的本地的ID获取的图片的base64数据，通过对数据的转换进行图片的保存
                                        wx.getLocalImgData({
                                            localId: localId, // 图片的localID
                                            success: function (res) {
                                                var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
 
                                                //通过ajax来将base64数据转换成图片保存在本地
                                                $.ajax({
                                                });
                                            }
                                        });
                                    }
                                });
                            },
                            fail: function(res) {
                            }
                        });
                    }
                }
            });
        }

完成以上步骤就可以在微信H5中调用相册和摄像头并上传服务器了