huiting/miniprogram/components/imagePicker/imagePicker.js

// components/imagePicker/imagePicker.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    images: Array,
    max: Number,
    imageWidth: Number,
    imageHeight: Number,
    readonly: Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    imageMargin: 0
  },

  observers: {
    'images, max, readonly': function (images, max, readonly) {
      this.setData({
        imageMargin: images.length + (images.length < max && !readonly) > 1 ? 5 : 0
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    chooseImage: function (num, callback) {
      wx.chooseImage({
        count: num,
        sizeType: ['original'],
        sourceType: ['album'],
        success: function (res) {
          callback(res.tempFilePaths)
        }.bind(this)
      })
    },

    previewImage: function (e) {
      wx.previewImage({
        urls: this.data.images,
        current: e.currentTarget.dataset.url
      })
    },

    removeImage: function (e) {
      for (var i = 0; i < this.properties.images.length; i++) {
        if (this.properties.images[i] == e.currentTarget.dataset.url) {
          var arr = this.properties.images
          arr.splice(i, 1)
          this.setData({
            images: arr
          })
          this.triggerEvent("change", {
            images: this.properties.images
          })
          break
        }
      }
    },

    addImage: function () {
      if (this.properties.images.length >= this.properties.max) {
        return
      }
      this.chooseImage(this.properties.max - this.properties.images.length, (img) => {
        var arr = this.properties.images.concat(img)
        this.setData({
          images: arr
        })
        this.triggerEvent("change", {
          images: this.properties.images
        })
      })
    },
  }
})