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']
      }).then(res => {
        callback(res.tempFilePaths)
      })
    },

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

    removeImage: function (e) {
      this.properties.images.splice(this.properties.images.indexOf(e.currentTarget.dataset.url), 1)
      this.triggerEvent("change", {
        images: this.properties.images
      })
    },

    addImage: function () {
      this.chooseImage(this.properties.max - this.properties.images.length, (imgs) => {
        this.properties.images = this.properties.images.concat(imgs)
        this.triggerEvent("change", {
          images: this.properties.images
        })
      })
    },
  }
})