income_payments_applet/components/imageUpload/imageUpload.js

// components/imageUpload/imageUpload.js

import {
  baseUrl,
  URL_CONFIG
} from '../../assets/js/project.config'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 最大上传个数
    maxLength: {
      type: Number,
      value: 9
    },
    // 单个图片限制 单位MB
    maxSize: {
      type: Number,
      value: 1
    },
    // 图片的回显
    initImgsList: {
      type: String
    }
  },
  observers: {
    'initImgsList': function (initImgsList) {
      let initImgArr
      if (!!this.data.initImgsList) {
        initImgArr = this.data.initImgsList.split(',')
      }
      const arr = []
      if (initImgArr && initImgArr.length > 0) {
        for (let index = 0; index < initImgArr.length; index++) {
          arr.push(baseUrl + URL_CONFIG + 'sys/common/download/' + initImgArr[index])
        }
      }
      this.setData({
        tempFilePaths: arr
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    // 图片路径数组
    tempFilePaths: []
  },
  lifetimes: {
    attached: function () {
      let initImgArr
      if (!!this.data.initImgsList) {
        initImgArr = this.data.initImgsList.split(',')
      }
      const arr = []
      if (initImgArr && initImgArr.length > 0) {
        for (let index = 0; index < initImgArr.length; index++) {
          arr.push(baseUrl + URL_CONFIG + 'sys/common/download/' + initImgArr[index])
        }
      }
      this.setData({
        tempFilePaths: arr
      })
      console.log(this.data.tempFilePaths);
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 选择图片
    upload() {
      let that = this;
      let maxSize = this.data.maxSize * 1024 * 1024
      let flag = true
      let maxLength = this.data.maxLength
      // 将图片的id抛出
      let imgids = []
      console.log("maxLength", maxLength);
      wx.chooseImage({
        count: maxLength, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          wx.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true,
            duration: 1000
          })
          // 判断数量
          if (res.tempFiles.length > maxLength) {
            wx.hideToast()
            flag = false
            wx.showToast({
              title: `最多上传${maxLength}张`,
              mask: true,
              duration: 1000
            })
            return false
          }
          res.tempFiles.forEach(item => {
            if (item.size > maxSize) {
              wx.hideToast()
              flag = false
              wx.showModal({
                title: '错误提示',
                content: `图片大于${that.data.maxSize}MB`,
                showCancel: false,
                success(res) {
                  if (res.confirm) {
                    console.log('用户点击确定')
                  }
                }
              })
              return false
            }
          })
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          let tempFilePaths = res.tempFilePaths;
          if (flag) {
            that.setData({
              tempFilePaths: tempFilePaths
            })
          }
          /**
           * 上传完成后把文件上传到服务器
           */

          if (flag) {
            let count = 0;
            for (let i = 0; i < tempFilePaths.length; i++) {
              //上传文件
              wx.uploadFile({
                url: baseUrl + URL_CONFIG + 'sys/common/upload',
                filePath: tempFilePaths[i],
                name: "file",
                formData: {
                  filetype: "image",
                },
                success: function (res) {
                  imgids.push(JSON.parse(res.data).result.id)
                  count++;
                  //如果是最后一张,则隐藏等待中
                  if (count == tempFilePaths.length) {
                    wx.hideToast();
                    that.triggerEvent("getIds", imgids)
                  }

                },
                fail: function (res) {
                  wx.hideToast();
                  wx.showModal({
                    title: '错误提示',
                    content: '上传图片失败',
                    showCancel: false,
                    success: function (res) {}
                  })
                }
              });
            }
          }
        },
        fail(err) {
          console.log("失败", err);
        }
      })
    },
    // 预览图片
    previewImage(e) {
      console.log("e", e);
      let index = e.target.dataset.index;
      let that = this;
      wx.previewImage({
        current: that.data.tempFilePaths[index],
        urls: that.data.tempFilePaths,
        success: function (res) {
          console.log("res", res);
        },
        fail: function (fail) {
          //console.log('fail')
        }
      })
    },
    // 删除图片
    deleteImage(e) {
      let that = this;
      let tempFilePaths = that.data.tempFilePaths;
      let index = e.currentTarget.dataset.index; //获取当前长按图片下标
      wx.showModal({
        title: '提示',
        content: '确定要删除此图片吗？',
        success: function (res) {
          if (res.confirm) {
            console.log('确定');
            tempFilePaths.splice(index, 1);
          } else if (res.cancel) {
            console.log('取消');
            return false;
          }
          that.setData({
            tempFilePaths
          });
        }
      })
    }
  }
})