fireflysg-wxapp/component/upload/index.js

// component/uploadImages/index.js
import request from '../../utils/request'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    count: { //最多选择图片的张数，默认9张
      type: Number,
      value: 9
    },
    uploadUrl: { //图片上传的服务器路径
      type: String,
      value: ''
    },
    showUrl: { //图片的拼接路径
      type: String,
      value: ''
    },
    getListImg: { // 获取图片
      type: Array,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    detailPics: [], //上传的结果图片集合
    isShow: true
  },

  ready: function () {
    console.log('富家大室咖啡机少的可怜', this.data.getListImg)
    if (this.data.getListImg) {
      this.setData({
        detailPics: this.data.getListImg
      })
    }
    console.log(this.data)
  },

  /**
   * 组件的方法列表
   */
  methods: {
    bindlongpressimg(e) {
      let index = e.currentTarget.dataset.id
      let detailPics = this.data.detailPics
      detailPics.splice(index, 1)
      this.setData({
        detailPics
      })
      console.log(this.data.detailPics)
      var myEventDetail = {
        picsList: this.data.detailPics
      } // detail对象，提供给事件监听函数
      let show = (this.data.detailPics.length < this.data.count) ? true : false
      this.setData({
        isShow: show
      })
      this.triggerEvent('myevent', myEventDetail, {}) //结果返回调用的页面
    },
    uploadDetailImage: function (e) { //这里是选取图片的方法
      var that = this;
      var pics = [];
      var detailPics = that.data.detailPics;
      if (detailPics.length >= that.data.count) {
        wx.showToast({
          title: '最多选择' + that.data.count + '张！',
        })
        return;
      }
      wx.chooseMedia({
        count: that.data.count, // 最多可以选择的图片张数，默认9,
        sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        maxDuration: 15,
        camera: 'back',
        success(res) {
          console.log(res.tempFiles)
          var imgs = res.tempFiles;
          for (var i = 0; i < imgs.length; i++) {
            pics.push(imgs[i].tempFilePath)
          }
          console.log(pics)
          let data = {
            url: that.data.uploadUrl, //这里是你图片上传的接口
            path: pics, //这里是选取的图片的地址数组
          }
          // that.imgSecCheck(pics)
          that.uploadimg(data);
        }
      })
    },
    imgSecCheck(imgs, num = 0) {
      let len = imgs.length
      request._post('/firefly/wx/imgSecCheck', {
          media: imgs[num]
        },
        res => {
          if (res.retCode == 0) {
            if (len == num) {
              let data = {
                url: this.data.uploadUrl, //这里是你图片上传的接口
                path: imgs, //这里是选取的图片的地址数组
              }
              this.uploadimg(data);
            } else {
              ++num
              this.imgSecCheck(imgs, num)
            }
          }
        })

    },
    //多张图片上传
    uploadimg: function (data) {
      console.log(data)
      wx.showLoading({
        title: '上传中...',
        mask: true,
      })
      var that = this,
        i = data.i ? data.i : 0,
        success = data.success ? data.success : 0,
        fail = data.fail ? data.fail : 0;
      wx.uploadFile({
        url: data.url,
        filePath: data.path[i],
        header: {
          'content-type': 'multipart/form-data',
          'terminal': 'MINI-PROGRAM',
          'token': wx.getStorageSync("token") || '',
        },
        name: 'file',
        formData: null,
        success: (resp) => {
          console.log(resp)
          wx.hideLoading();
          success++;
          var str = resp.data //返回的结果，可能不同项目结果不一样
          var pic = JSON.parse(str);
          var pic_name = pic.body.mediaURL;
          var detailPics = that.data.detailPics;
          detailPics.push({
            mediaId: pic.body.mediaId,
            mediaPath: pic_name,
            mediaURL: pic.body.mediaURL,
            seq: 1
          })
          that.setData({
            detailPics: detailPics
          })
        },
        fail: (res) => {
          fail++;
          console.log('fail:' + i + "fail:" + fail);
        },
        complete: () => {
          i++;
          if (i == data.path.length) { //当图片传完时，停止调用     
            console.log('执行完毕');
            console.log('成功：' + success + " 失败：" + fail);
            var myEventDetail = {
              picsList: that.data.detailPics
            } // detail对象，提供给事件监听函数
            let show = (that.data.detailPics.length < that.data.count) ? true : false
            that.setData({
              isShow: show
            })
            var myEventOption = {} // 触发事件的选项
            that.triggerEvent('myevent', myEventDetail, myEventOption) //结果返回调用的页面
          } else { //若图片还没有传完，则继续调用函数
            data.i = i;
            data.success = success;
            data.fail = fail;
            that.uploadimg(data); //递归，回调自己
          }
        }
      });
    },

  }
})