快捷導(dǎo)航

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

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

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

微信小程序上傳圖片很簡(jiǎn)單：

//點(diǎn)擊選擇圖片
 chooseimage:function(){
  var that = this;
  wx.chooseImage({
    count: 9, // 默認(rèn)9 
   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有 
   sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有 
   success: function(res) {
    that.setData({
     tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基礎(chǔ)上進(jìn)行拼接
    })
   }
  })
 },

這里的setData里面是當(dāng)你選擇照片之后，再一次出發(fā)函數(shù)時(shí)候，會(huì)在原有的基礎(chǔ)上增加照片，而不是覆蓋掉，有興趣可以看一下concat的含義

這里就選擇了照片，可以顯示在界面上

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

效果圖：

然后是多圖上傳的過(guò)程，這里我上傳到公司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)//把字符串解析成對(duì)象
  })
  // console.log(that.data.mes.data.filePath)
  // console.log(that.data.images.length + "**********")
  // wx.showToast({
  //  title: 'success',
  // })
 },
 fail: function (res) {
  wx.showToast({
   title: '圖片加載失敗',
  })
 }
 })
 }

其實(shí)到這里都沒(méi)有太大的問(wèn)題。

但是當(dāng)我點(diǎn)擊提交的時(shí)候，就會(huì)出現(xiàn)圖片為空的問(wèn)題，這是因?yàn)?，我們?cè)谔峤坏氖录锌隙ㄊ窍葘?xiě)上傳圖片的方法，

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

我搜了很多答案出來(lái)，但是由于是接觸不久，完全沒(méi)看懂，什么Promis之類(lèi)的，只能自己想辦法，就在選擇圖片的時(shí)候就把圖片上傳了，然后返回路徑：

 //點(diǎn)擊選擇圖片
 chooseimage:function(){
  var that = this;
  wx.chooseImage({
    count: 9, // 默認(rèn)9 
   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有 
   sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有 
   success: function(res) {
    that.setData({
     tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基礎(chǔ)上進(jìn)行拼接
    })
    that.upload();
    that.setData({
     temp: that.data.tempFilePaths.length//用來(lái)解決 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])
  }
 },

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

源碼：

// pages/comment/cmment.js
const app = getApp()
Page({
 
 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  mes:{},
  content:'',
  tempFilePaths:[],
   userInfo: {},
  hasUserInfo: false,
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  images:[],
  temp:0,
  infoId:'',
  sendtype:''
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  */
 onLoad: function (options) {
  console.log(options.infoId+"infoID")
  this.setData({
   infoId: options.infoId,
   sendtype: options.sendtype
  }) 
 
 },
 /**
  * 頁(yè)面上拉觸底事件的處理函數(shù)
  */ 
 onReachBottom: function () {
 
 },
 confirmSubmit:function(e){
  
  console.log(e.detail.value)
 },
 
 //點(diǎn)擊選擇圖片
 chooseimage:function(){
  var that = this;
  wx.chooseImage({
    count: 9, // 默認(rèn)9 
   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有 
   sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有 
   success: function(res) {
    that.setData({
     tempFilePaths: that.data.tempFilePaths.concat(res.tempFilePaths)//在已有的基礎(chǔ)上進(jìn)行拼接
    })
    that.upload();
    that.setData({
     temp: that.data.tempFilePaths.length//用來(lái)解決 for 循環(huán)比 異步 快
    })
   }
  })
 },
 //點(diǎn)擊刪除圖片
 delete: function (e){
  var index = e.currentTarget.dataset.id;
  this.data.tempFilePaths.splice(index,1)
  //渲染數(shù)據(jù)
  this.setData({
   tempFilePaths: this.data.tempFilePaths
  })
 },
 //提交評(píng)論
 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: '評(píng)論成功',
     })
     return;
    }
    else {
     wx.showModal({
      title: '提示',
      content: '評(píng)論失敗',
     })
    }
   }
  })
  // 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)//把字符串解析成對(duì)象
  })
  // console.log(that.data.mes.data.filePath)
  // console.log(that.data.images.length + "**********")
  // wx.showToast({
  //  title: 'success',
  // })
 },
 fail: function (res) {
  wx.showToast({
   title: '圖片加載失敗',
  })
 }
 })
 }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: