欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年05月05日 09:54:19   作者:皮蛋小粥  
這篇文章主要介紹了微信小程序上傳多圖到服務(wù)器并獲取返回的路徑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

//點(diǎn)擊選擇圖片
 chooseimage:function(){
  var that = this;
  wx.chooseImage({
    count: 9, // 默認(rèn)9 
   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 
   sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(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>

效果圖:


然后是多圖上傳的過程,這里我上傳到公司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: '圖片加載失敗',
  })
 }
 })
 }

其實(shí)到這里都沒有太大的問題。

但是當(dāng)我點(diǎn)擊提交的時(shí)候,就會(huì)出現(xiàn)圖片為空的問題,這是因?yàn)?,我們在提交的事件中肯定是先寫上傳圖片的方法,

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

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

 //點(diǎn)擊選擇圖片
 chooseimage:function(){
  var that = this;
  wx.chooseImage({
    count: 9, // 默認(rèn)9 
   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 
   sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(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//用來解決 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ì)解決問題,可以實(shí)現(xiàn)上傳,但是刪除的時(shí)候需要把上傳的也刪除掉,而不是單單的吧集合里面的刪除掉。

源碼:

// 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)
 },
 
 //點(diǎn)擊選擇圖片
 chooseimage:function(){
  var that = this;
  wx.chooseImage({
    count: 9, // 默認(rèn)9 
   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 
   sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(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//用來解決 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
  })
 },
 //提交評論
 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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript中添加監(jiān)聽句柄的方式

    JavaScript中添加監(jiān)聽句柄的方式

    這篇文章主要介紹了JavaScript中添加監(jiān)聽句柄的方式,監(jiān)聽就是觸發(fā)某事件之后做出的響應(yīng),監(jiān)聽句柄是觸發(fā)某相應(yīng)的條件,下面關(guān)于添加監(jiān)聽句柄的方式的詳細(xì)內(nèi)容,需要的朋友可以參考一下,希望對你有所幫助
    2022-02-02
  • javascript刪除數(shù)組元素并且數(shù)組長度減小的簡單實(shí)例

    javascript刪除數(shù)組元素并且數(shù)組長度減小的簡單實(shí)例

    本篇文章主要是對javascript刪除數(shù)組元素并且數(shù)組長度減小的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • webpack中splitChunks分包策略的實(shí)現(xiàn)

    webpack中splitChunks分包策略的實(shí)現(xiàn)

    splitChunks是 webpack 中用于分包的配置選項(xiàng)之一,本文主要介紹了webpack中splitChunks分包策略的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-06-06
  • javascript不同頁面?zhèn)髦档母倪M(jìn)版

    javascript不同頁面?zhèn)髦档母倪M(jìn)版

    改進(jìn)點(diǎn):支持同頁面有多個(gè)文本框,可自動(dòng)向不同的文本框傳值。先看演示吧
    2008-09-09
  • js常用的繼承--組合式繼承

    js常用的繼承--組合式繼承

    本篇文章主要介紹了js常用的繼承--組合式繼承的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-03
  • js實(shí)現(xiàn)頁面轉(zhuǎn)發(fā)功能示例代碼

    js實(shí)現(xiàn)頁面轉(zhuǎn)發(fā)功能示例代碼

    本文為大家介紹的是使用js實(shí)現(xiàn)頁面轉(zhuǎn)發(fā),具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助
    2013-08-08
  • TypeScript聲明文件的語法與場景詳解

    TypeScript聲明文件的語法與場景詳解

    使用ts進(jìn)行開發(fā)的時(shí)候,不可避免的需要引用第三方的 JS 的庫,但是默認(rèn)情況下TS是不認(rèn)識(shí)我們引入的這些JS庫的,所以在使用這些JS庫的時(shí)候,我們就要通過聲明文件告訴TS它是什么,這篇文章主要給大家介紹了關(guān)于TypeScript聲明文件的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • JS實(shí)現(xiàn)仿微信支付彈窗功能

    JS實(shí)現(xiàn)仿微信支付彈窗功能

    這篇文章主要介紹了JS實(shí)現(xiàn)仿微信支付彈窗功能,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-06-06
  • uniapp項(xiàng)目實(shí)踐封裝通用請求上傳以及下載方法總結(jié)

    uniapp項(xiàng)目實(shí)踐封裝通用請求上傳以及下載方法總結(jié)

    在日常開發(fā)過程中,前端經(jīng)常要和后端進(jìn)行接口聯(lián)調(diào),獲取并且渲染數(shù)據(jù)到頁面中,接下來就總結(jié)一下?uniapp?中獲取請求、文件下載和上傳的一些方法
    2023-09-09
  • webpack@v4升級(jí)踩坑(小結(jié))

    webpack@v4升級(jí)踩坑(小結(jié))

    這篇文章主要介紹了webpack@v4升級(jí)踩坑(小結(jié)),之前就嘗試了升級(jí),由于部分插件的原因,未能成功,今天就來試一下在我的項(xiàng)目中升級(jí)會(huì)遇到哪些坑。感興趣的小伙伴們可以參考一下
    2018-10-10

最新評論