javascript - 求助关于微信上传图片功能的API使用方法！

Question

    var images = {
        localId: [],
        serverId: []
     };

    document.querySelector('#chooseImage').onclick = function () {
          wx.chooseImage({
              count    : 2,
              sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
              success : function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                syncUpload(localIds);
            }
        });
    };

    function syncUpload(localIds){
        var localId = localIds.pop();
        wx.uploadImage({
            localId: localId,
            isShowProgressTips: 1,
            success: function (res) {
                var serverId = res.serverId; // 返回图片的服务器端ID
                images.serverId.push(serverId);
                $('.message').append(serverId);
                if(localIds.length > 0){
                    syncUpload(localIds);
                }

                viewImage(images.serverId);
            }
        });
    };

    function viewImage(serverIds){
        var i = 0, len = serverIds.length;

        //    这里我该怎么做，可以预览到上传的图片？
    }

Answer 1

var img = new Image();

                  img.src = res.localIds;

                  img.onload=function(){
                      $('.message').append(img);
                  };  

Answer 2

h5有filereader的api 把读出来的buffer放到img的src里就可以了。

var reader = new FileReader();
    reader.onload = function(){
    var img = document.createElement('img');
    img.src = this.result;
    img.onload = function(){
        //把img append到展示的地方。
    }
}
reader.readAsDataURL(file);

Answer 3

localIds就已经可以预览了，不需要额外的操作了，serverId是一串普通字符串，而不是一个图片资源地址，不能用于预览吧。

Answer 4

wx.chooseImage() 回调得到的 localIds 就已经可以写进 <img> 的 src 时进行预览了。

for (i = 0; i < len; i += 1) {
    $('domSelector').append('<img src="' + serverIds[i] + '" />');
}