微信小程序上传多图到服务器并获取返回的路径

微信⼩程序上传多图到服务器并获取返回的路径
微信⼩程序上传图⽚很简单：
//点击选择图⽚
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(Id+"infoID")
this.setData({
infoId: Id,
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(Id + "infoID不能⽤？")
wx.request({
url: 'https://*******/saveComments',
method: 'POST',
header: {
'content-type': 'application/json',
'user-token': 'OXJ*****',//usertoken
},
data: {
relevantId: Id,
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= ' + Id
// })
},
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: '图⽚加载失败',
})
}
})
}
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。