微信小程序 上傳圖的功能

首先選擇圖片，而後循環，再就是在點擊發布的時候循環圖片地址賦值，包括刪除命令

 

js代碼:

  //選擇圖片
  uploadImgAdd: function(e) {
    var imgs = this.data.imgs;
    console.log(imgs)
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log(res)
        let tempFilePaths = res.tempFilePaths;
        let imgs = this.data.imgs;
        console.log('imgs')
        console.log(imgs)
        //上傳的圖片
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 9) {
            return false;
          } else {
            imgs.push(tempFilePaths[i])
          }
        }
        //上傳的圖片放到頁面上
        this.setData({
          imgs: imgs
        })
      }
    })
  },

  /**
   * 獲取上傳圖片地址
   */
  //單擊發布上傳圖片和內容
  bindFormSubmit: function(e) {
    var imgArr = this.data.imgs;
    this.addPic(e, imgArr)
  },
  addPic: function(e, imgArr) {
    console.log("imgArr")
    console.log(imgArr)
   
    let uploadimagsSrc = this.data.uploadimagsSrc;
    console.log("uploadimagsSrc")
    console.log(uploadimagsSrc)
    for (let i in imgArr) {
      wx.uploadFile({
        url: app.data.urls + 'images/Picture',
        filePath: imgArr[i],
        header: {
          'content-type': 'multipart/form-data'
        },
        name: 'file',
        success: res => {
          console.log(res)
          let data = res.data;
          console.log(data)
          console.log([...uploadimagsSrc, data])
          uploadimagsSrc = [...uploadimagsSrc, data];
          console.log(uploadimagsSrc)
          this.setData({
            uploadimagsSrc: uploadimagsSrc
          })
        },
      })
    }
    
    let timer = setInterval(() => {
      //間歇調用
      if (uploadimagsSrc.length == imgArr.length) {
        console.log(uploadimagsSrc)
        console.log(imgArr)
        debugger
        this.sendMessageInfo(e, uploadimagsSrc);
        clearInterval(timer); //可取消由 setInterval() 函數設定的定時執行操做
      }
    }, 500)
  },
  sendMessageInfo: function(e, imagsSrc) {
    var formData = e.detail.value.message
    if (formData.length == 0) {
      wx.showToast({
        title: '意見反饋內容不能爲空，說幾句話吧~',
        icon: 'none',
        duration: 1500
      })
      return false;
    }
    var replaceLeftRig = formData.replace(/(^\s*)|(\s*$)/g, "").length
    if (replaceLeftRig < 15) {
      wx.showToast({
        title: '意見反饋內容不能少於15個字',
        icon: 'none',
        duration: 1500
      })
      return false;
    }
    imagsSrc = imagsSrc.join(';')
    wx.request({
      url: app.data.urls + 'feedback/insertCustomerFeedback',
      data: {
        "customerId": app.data.customerId,
        "feedbackMessages": formData,
        "imagesAddress": imagsSrc,
      },
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function(res) {
        console.log(res)
        /**
         * 
         * 異常判斷
         * 
         * 
         */
        if (res.data.status == 200) {
          wx.showModal({
            content: '謝謝您提交的反饋，後臺的小哥哥會第一時間收到哦~',
            showCancel: false,
            confirmText: "知道了",
            success: function(res) {
              if (res.confirm) {
                wx.navigateBack({
                  delta: 1
                })
              }
            }
          });
        } else {
          wx.showModal({
            content: '系統繁忙',
            showCancel: false,
            confirmText: "知道了",
            success: res => {
              console.log(res)
            }
          });
        }


      }
    })
  },

  //刪除圖片
  uploadImgClose: function(e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
    // console.log(imgs)
  },feedBack/feedBack