微信小程式上傳多圖到伺服器並獲取返回的路徑

微信小程式上傳圖片很簡單：

//點選選擇圖片
  chooseimage:function(){
    var that = this;
    wx.chooseImage({
       count: 9, // 預設9 
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有 
      sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有 
      success: function(res) {
        that.setData({
          tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基礎上進行拼接
        })
      }
    })
  },

這裡的setData裡面是當你選擇照片之後，再一次出發函式時候，會在原有的基礎上增加照片，而不是覆蓋掉，有興趣可以看一下concat的含義

這裡就選擇了照片，可以顯示在介面上

 <image class="icon-image" background-size="contain" wx:for="{{tempFilePaths}}" src='{{item}}' 
  data-id='{{index}}'   bindtap='delete'></image>

效果圖：

然後是多圖上傳的過程，這裡我上傳到公司oss裡面，原始碼：

 upload:function(){
    for (var i = 0; i < this.data.tempFilePaths.length; i++) {
      // console.log("000")
      this.upload_file(this.data.tempFilePaths[i])
    }
  },
  upload_file: function (filepath) {
    var that = this;
  wx.uploadFile({
    url: 'https://***********************/imgs',
    header: {
      'content-type': 'multipart/form-data'
    },
    filePath: filepath,
    name: 'file',
    formData: {
      file: filepath
    },
  success:function(res){
    that.setData({
      mes:JSON.parse(res.data),
      images: that.data.images.concat(JSON.parse(res.data).data.filePath)//把字串解析成物件
    })
    // console.log(that.data.mes.data.filePath)
    // console.log(that.data.images.length + "**********")
    // wx.showToast({
    //   title: 'success',
    // })
  },
  fail: function (res) {
    wx.showToast({
      title: '圖片載入失敗',
    })
  }
  })
  }

其實到這裡都沒有太大的問題。

但是當我點選提交的時候，就會出現圖片為空的問題，這是因為，我們在提交的事件中肯定是先寫上傳圖片的方法，

讓後是提交的方法，但是由於微信小程式是非同步，在for迴圈沒有執行完就觸發了提交的事件，這造成圖片為空的問題。

我搜了很多答案出來，但是由於是接觸不久，完全沒看懂，什麼Promis之類的，只能自己想辦法，就在選擇圖片的時候就把圖片上傳了，然後返回路徑：

 //點選選擇圖片
  chooseimage:function(){
    var that = this;
    wx.chooseImage({
       count: 9, // 預設9 
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有 
      sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有 
      success: function(res) {
        that.setData({
          tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基礎上進行拼接
        })
        that.upload();
        that.setData({
          temp: that.data.tempFilePaths.length//用來解決 for 迴圈比 非同步 快
        })
      }
    })
  },

 upload:function(){
    for (var i = this.data.temp; i < this.data.tempFilePaths.length; i++) {
      // console.log("000")
      this.upload_file(this.data.tempFilePaths[i])
    }
  },

你會發現我加了一個temp,這樣就會解決問題，可以實現上傳，但是刪除的時候需要把上傳的也刪除掉，而不是單單的吧集合裡面的刪除掉。

原始碼：

// pages/comment/cmment.js
const app = getApp()
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    mes:{},
    content:'',
    tempFilePaths:[],
     userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    images:[],
    temp:0,
    infoId:'',
    sendtype:''
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    console.log(options.infoId+"infoID")
    this.setData({
      infoId: options.infoId,
      sendtype: options.sendtype
    }) 

  },
  /**
   * 頁面上拉觸底事件的處理函式
   */ 
  onReachBottom: function () {
  
  },
  confirmSubmit:function(e){
    
    console.log(e.detail.value)
  },

  //點選選擇圖片
  chooseimage:function(){
    var that = this;
    wx.chooseImage({
       count: 9, // 預設9 
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有 
      sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有 
      success: function(res) {
        that.setData({
          tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基礎上進行拼接
        })
        that.upload();
        that.setData({
          temp: that.data.tempFilePaths.length//用來解決 for 迴圈比 非同步 快
        })
      }
    })
  },
  //點選刪除圖片
  delete: function (e){
    var index = e.currentTarget.dataset.id;
    this.data.tempFilePaths.splice(index,1)
    //渲染資料
    this.setData({
      tempFilePaths: this.data.tempFilePaths
    })
  },
  //提交評論
  formBindsubmit: function (e) {
    // console.log(this.data.images.length + "*****");
    // for (var i = 0; i < this.data.images.length; i++){
    //   console.log(this.data.images[i]);
    // }
    console.log(this.data.infoId + "infoID不能用？")
    wx.request({
      url: 'https://*******/saveComments',
      method: 'POST',
      header: {
        'content-type': 'application/json',
        'user-token': 'OXJ*****',//usertoken
      },
      data: {
        relevantId: this.data.infoId,
        type: 1,//this.data.type,
        content:e.detail.value.content,
        images:this.data.images,

      },
      success: function (res) {
        if (res.statusCode = 200) {
          wx.showModal({
            title: '提示',
            content: '評論成功',
          })
          return;
        }
        else {
          wx.showModal({
            title: '提示',
            content: '評論失敗',
          })
        }
      }
    })
    // wx.navigateTo({
    //   url: '../article/article?id= ' + this.data.infoId
    // })
  },
  upload:function(){
    for (var i = this.data.temp; i < this.data.tempFilePaths.length; i++) {
      // console.log("000")
      this.upload_file(this.data.tempFilePaths[i])
    }
  },
  upload_file: function (filepath) {
    var that = this;
  wx.uploadFile({
    url: 'https://********/fileupload/uploader/imgs',
    header: {
      'content-type': 'multipart/form-data'
    },
    filePath: filepath,
    name: 'file',
    formData: {
      file: filepath
    },
  success:function(res){
    that.setData({
      mes:JSON.parse(res.data),
      images: that.data.images.concat(JSON.parse(res.data).data.filePath)//把字串解析成物件
    })
    // console.log(that.data.mes.data.filePath)
    // console.log(that.data.images.length + "**********")
    // wx.showToast({
    //   title: 'success',
    // })
  },
  fail: function (res) {
    wx.showToast({
      title: '圖片載入失敗',
    })
  }
  })
  }
})