微信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升级导致的。