溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
微信小程序上傳圖片很簡單：
//點擊選擇圖片
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: '圖片加載失敗',
})
}
})
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
