微信小程序上傳多圖到服務器并獲取返回的路徑

更新時間：2019年05月05日 09:54:19 作者：皮蛋小粥

這篇文章主要介紹了微信小程序上傳多圖到服務器并獲取返回的路徑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

//點擊選擇圖片
 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里面是當你選擇照片之后，再一次出發(fā)函數(shù)時候，會在原有的基礎上增加照片，而不是覆蓋掉，有興趣可以看一下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: '圖片加載失敗',
  })
 }
 })
 }

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

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

讓后是提交的方法，但是由于微信小程序是異步，在for循環(huán)沒有執(zhí)行完就觸發(fā)了提交的事件，這造成圖片為空的問題。

我搜了很多答案出來，但是由于是接觸不久，完全沒看懂，什么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 循環(huán)比 異步 快
    })
   }
  })
 },

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

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

源碼：

// pages/comment/cmment.js
const app = getApp()
Page({
 
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  mes:{},
  content:'',
  tempFilePaths:[],
   userInfo: {},
  hasUserInfo: false,
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  images:[],
  temp:0,
  infoId:'',
  sendtype:''
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  console.log(options.infoId+"infoID")
  this.setData({
   infoId: options.infoId,
   sendtype: options.sendtype
  }) 
 
 },
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */ 
 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 循環(huán)比 異步 快
    })
   }
  })
 },
 //點擊刪除圖片
 delete: function (e){
  var index = e.currentTarget.dataset.id;
  this.data.tempFilePaths.splice(index,1)
  //渲染數(shù)據(jù)
  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: '圖片加載失敗',
  })
 }
 })
 }
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: