小程序上传多张图片

思路：
整体图片选择使用一个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链接列表
    })
  },

用到系统自带的方法，点击图片预览大图。

demo地址为：https://github.com/dt8888/moreImgaes

作者：honey缘木鱼
链接：https://www.jianshu.com/p/296680d6b173