微信jssdk多图上传

在微信里面开发，我们可以使用微信jssdk 的图片上传

思路基本上是
手机选中图片，上传到微信服务器，加入临时素材库（好像三天就过期了）
然后再服务端去微信的服务器 把图片下载到本地。
如果有自己的cdn，可以在此上传到其他平台。

这里有两个思路

因为当我们选择手机图片时，我们就可以拿到图片了，这个时候页面上可以直接展示图片，但是是手机本身的图片，并没有在自己的服务器，我们并没有这个图片的链接
也可以自己的服务器下载下来之后，返回给前端一个连接，就是上传的图片的链接。但是前端展示就会慢一点

这两个感觉第二个必须比第一个好。但是也看情况。
第一种情况，你可以暂时不拉取微信的临时素材，等到查看的时候再拉取。数据库里面存临时码，再找机会拉取真正的图片。–虽然速度快，但是必须分段处理，在查看之前必须找机会拉取图片

第二种情况时拉取完了 再展示，数据库里面存的就是图片地址–虽然展示效果慢一点，但是存在数据库的都是正常的图片地址。不用再费心处理

开始代码吧

首先必须获取签名，通过这些签名，你才可以去调用jssdk接口

wx.config({
    debug: false,
    appId: '{pigcms:$signPackage["appId"]}',
    timestamp: '{pigcms:$signPackage["timestamp"]}',
    nonceStr: '{pigcms:$signPackage["nonceStr"]}',
    signature: '{pigcms:$signPackage["signature"]}',
    jsApiList: [
        // 所有要调用的 API 都要加到这个列表中
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'chooseImage',／／选择图片接口
        'previewImage',
        'uploadImage',／／上传图片
        'downloadImage'／／下载图片
    ]
});

这是红包雨功能里面多图上传
使用vue来写的。所以里面有很多vue的代码，但是原理是通的
采用的是暂时不下载下来图片。后续下载。

upmoreimage: function () {
    var that = this;
    var up_num = $('.upimg_box_block li').length;
    if (up_num < 3) {
        var that = this;
        doupload(3 - up_num);
    } else {
        vm.warn_show('图片最多添加3张',3000);／／最多上传三张
    }
    function doupload(up_num) {
        that.$set('moreimages.localId', []);
        wx.chooseImage({
            count: up_num, //顶部头像最多6张
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {   ／／选择图片成功res为选择的图片

// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                that.$set('moreimages.localId', res.localIds); 

                if (that.moreimages.localId.length == 0) {
                    vm.warn_show('请先选择上传图片',3000);
                    return;
                }
                if (that.moreimages.localId.length > 3) {
                    vm.warn_show('目前仅支持3张图片上传,请重新上传',3000);
                    that.$set('moreimages.localId', []);
                    return;
                }
                var i = 0, length = that.moreimages.localId.length;
                upload();
                function upload() {
                    wx.uploadImage({ 。 ／／上传图片，每次上传一张，拿着选择图片成功的参数，去上传到微信服务器
                        localId: that.moreimages.localId[i],
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {／／上传成功，返回一个码，可以去微信服务器获取图片
                            i++;
                            //怎么把这个给加进去
                            var count = [];
                            var more_img = that.more_img;
                            for (x  in   more_img) {
                                if (more_img[x].show == 0 && more_img[x].url == '') {
                                    count.push(x);
                                }
                            }
                            if (count.length > 0) {
                                var add_num = count[0];
                                that.more_img[add_num].url = that.moreimages.localId[i - 1];
                                that.more_img[add_num].show = 1;
                                that.more_img[add_num].serverId = res.serverId;
                            }
                            if (i < length) {
                                upload();
                            }
                        },
                        fail: function (res) {
                            vm.warn_show('上传失败,请重新上传',3000);
                        }
                    });
                }
            }
        });
    }
},

遇到的坑

要用最新版的jssdk。因为我们在使用的时候发现，苹果手机展示本地的图片不能显示出来，结果是jssdk升级导致的。