微信公众号开发JSSDK上传图片（多图上传）

最新推荐文章于 2024-06-21 20:56:04 发布

Jaimor

最新推荐文章于 2024-06-21 20:56:04 发布

阅读量1.8w

点赞数 2

分类专栏：微信公众号开发文章标签：微信图片 jssdk 微信多图上传微信多图下载

本文链接：https://blog.csdn.net/u014307562/article/details/50300557

版权

微信公众号开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

前面做了微信公众号开发，涉及到了图片上传功能。微信jssdk-api带有一套完整的调用选择本地图片上传的功能，很多朋友在问到多图上传的问题。在这里分享一下自己的做法，其实并不是自己的做法，就是完全按照微信开发文档的做法，很多朋友可能没有仔细看文档，或者文档内容太多所以不想看，然后就不知道做法了，我这里挂出来，是这样做的

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

  //选择图片

  document.querySelector('#chooseImage').onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert('已选择 ' + res.localIds.length + ' 张图片');
      }
    });
  };

  // 5.2 图片预览
  document.querySelector('#previewImage').onclick = function () {
    wx.previewImage({
      current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
      urls: [
        'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
        'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
        'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
      ]
    });
  };

  // 5.3 上传图片
  document.querySelector('#uploadImage').onclick = function () {
    if (images.localId.length == 0) {
      alert('请先使用 chooseImage 接口选择图片');
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          //alert('已上传：' + i + '/' + length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();    /*********************多张图片，这里上传使用的是递归******************************/
  };

  // 5.4 下载图片
  document.querySelector('#downloadImage').onclick = function () {
    if (images.serverId.length === 0) {
      alert('请先使用 uploadImage 上传图片');
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert('已下载：' + i + '/' + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();      /*********************多张图片，这里下载使用的是递归******************************/

  };

多图上传或者下载都是使用的递归方法，在Android或者IOS中都是行得通的（在这里多说一句，有些接口，Android行得通，IOS却不行；IOS可以的，Android可能又会有问题，当然这只是极个别现象，用多了就会发现）。

这些接口都是需要配合着图片选择来用的哦

下边二维码可以用微信扫描，上边有所有的接口demo