微信小程序上傳圖片很簡單：
//點擊選擇圖片 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.jsconst 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: '圖片加載失敗', }) } }) }})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
