微信小程式上傳多圖到伺服器並獲取返回的路徑
阿新 • • 發佈:2019-01-03
微信小程式上傳圖片很簡單:
//點選選擇圖片 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.js
const 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: '圖片載入失敗',
})
}
})
}
})