Developed in Wechat, we can upload pictures using Wechat jssdk

The idea is basically
Pictures are selected by the phone, uploaded to the Wechat server, and added to the temporary material library (as if it had expired in three days).
Then the server goes to the Wechat server and downloads the pictures to the local location.
If you have your own cdn, you can upload it to other platforms.

Here are two ideas

Because when we choose the picture of mobile phone, we can get the picture. At this time, the picture can be displayed directly on the page, but it is the picture of mobile phone itself, not on its own server. We don't have a link to the picture.
You can also download your own server and return it to the front end for a connection, which is a link to the uploaded image. But the front-end display will be slower.

The second must be better than the first. But it depends.
In the first case, you can not pull the temporary material of Wechat for the time being, and then pull it when you look at it. Store temporary codes in the database and find opportunities to pull real pictures. - It's fast, but it has to be processed in segments, and you have to look for opportunities to pull pictures before viewing them.

In the second case, after pulling it out and showing it again, the image address is stored in the database - although the display effect is slower, the normal image address exists in the database. Don't bother to deal with it anymore.

Start coding.

First you have to get the signatures, through which you can call the jssdk interface

wx.config({
    debug: false,
    appId: '{pigcms:$signPackage["appId"]}',
    timestamp: '{pigcms:$signPackage["timestamp"]}',
    nonceStr: '{pigcms:$signPackage["nonceStr"]}',
    signature: '{pigcms:$signPackage["signature"]}',
    jsApiList: [
        // All API s to be invoked are added to this list
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'chooseImage',／／Select Picture Interface
        'previewImage',
        'uploadImage',／／Upload pictures
        'downloadImage'／／Download pictures
    ]
});

This is red envelope rain function inside multi-map upload
Write in vue. So there's a lot of Vue code in it, but it works.
It uses images that are not downloaded for the time being. Follow-up download.

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('Add up to 3 pictures',3000);／／Up to three uploads
    }
    function doupload(up_num) {
        that.$set('moreimages.localId', []);
        wx.chooseImage({
            count: up_num, //Up to 6 top portraits
            sizeType: ['original', 'compressed'], // You can specify whether it's original or compressed, both by default.
            sourceType: ['album', 'camera'], // You can specify whether the source is an album or a camera by default.
            success: function (res) {   ／／Successful Picture Selection res Pictures for Selection

// Returns the list of local ID s for the selected photos, and localId can display the images as the src attribute of the img tag
                that.$set('moreimages.localId', res.localIds); 

                if (that.moreimages.localId.length == 0) {
                    vm.warn_show('Please choose to upload pictures first.',3000);
                    return;
                }
                if (that.moreimages.localId.length > 3) {
                    vm.warn_show('At present, only three pictures are uploaded.,Please re-upload',3000);
                    that.$set('moreimages.localId', []);
                    return;
                }
                var i = 0, length = that.moreimages.localId.length;
                upload();
                function upload() {
                    wx.uploadImage({ .  ／／Upload pictures, upload one picture at a time, take the parameters to select the picture success, upload to the Wechat server.
                        localId: that.moreimages.localId[i],
                        isShowProgressTips: 1, // The default is 1, showing progress hints
                        success: function (res) {／／Upload success, return a code, you can go to the Wechat server to get pictures
                            i++;
                            //How to add this in?
                            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('Upload failure,Please re-upload',3000);
                        }
                    });
                }
            }
        });
    }
},

Pits encountered

Use the latest version of jssdk. Because when we used it, we found that the local pictures displayed on the Apple mobile phone could not be displayed. The result was the upgrade of jssdk.