小程序上传多张图片

honey缘木鱼

发布于 2018-09-26 09:26:27

4.8K00

代码可运行

运行总次数：0

代码可运行

以前写过小程序网络和本地图片到相册的方法：https://cloud.tencent.com/developer/article/1156773，写过上传一张或多张图片到阿里云OSShttps://www.jianshu.com/p/ea2e567b6f2c，写过小程序加载本地图片路径问题https://cloud.tencent.com/developer/article/1181975，这次写个布局关于多张图片上传。

效果图

思路：

整体图片选择使用一个view控件，前面选中的图片为一个block根据选择图片的数量来显示多少个，后面的选择图片按钮为一个view。选中图片上面的删除按钮，使用绝对定位和相对定位来处理。添加图片，删除图片，点击选中图片查看大图等添加一个点击事件

考虑问题：

1.上传的多少张图片？

2.上传后想删除？

3.如何控制布局，用好用flex布局。

关键代码:

 /** 选择图片 */
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 9 - that.data.imgArr.length,
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], 
      success: function (res) {
        if (res.tempFilePaths.count == 0) {
          return;
        }
        //上传图片
        var imgArrNow = that.data.imgArr;
        imgArrNow = imgArrNow.concat(res.tempFilePaths);
        that.setData({
          imgArr: imgArrNow
        })
        that.chooseViewShow();
      }
    })
  },

代码中的9是中最多传9张图片，图片类型是否为压缩，图片来源是相册还是相机。

/** 删除图片 */
  deleteImv: function (e) {
    var imgArr = this.data.imgArr;
    var itemIndex = e.currentTarget.dataset.id;
    imgArr.splice(itemIndex, 1);
    this.setData({
      imgArr: imgArr
    })
    //判断是否隐藏选择图片
    this.chooseViewShow();
  },

删除照片，改变布局格式显示。

/** 是否隐藏图片选择 */
  chooseViewShow: function () {
    if (this.data.imgArr.length >= 9) {
      this.setData({
        chooseViewShow: false
      })
    } else {
      this.setData({
        chooseViewShow: true
      })
    }
  },

  /** 显示图片 */
  showImage: function (e) {
    var imgArr = this.data.imgArr;
    var itemIndex = e.currentTarget.dataset.id;

    wx.previewImage({
      current: imgArr[itemIndex], // 当前显示图片的http链接
      urls: imgArr // 需要预览的图片http链接列表
    })
  },