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

發(fā)布時間：2020-10-05 12:37:16 來源：腳本之家閱讀：153 作者：皮蛋小粥欄目：web開發(fā)

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

//點擊選擇圖片
 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: '圖片加載失敗',
  })
 }
 })
 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關推薦

相關標簽