huiting/miniprogram/components/imagePicker/imagePicker.js

// components/imagePicker/imagePicker.js
Component({
  behaviors: ['wx://form-field'],

  /**
   * 组件的属性列表
   */
  properties: {
    value: Array,
    max: Number,
    imageWidth: Number,
    imageHeight: Number,
    readonly: Boolean
  },

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

  observers: {
    'value, max, readonly': function (value, max, readonly) {
      this.setData({
        imageMargin: value.length + (value.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.value,
        current: e.currentTarget.dataset.url
      })
    },

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

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