微信小程序上传多图到服务器并获取返回的路径
(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )
微信小程序上传图片很简单：
//点击选择图片
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"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: '图片加载失败',
})
}
})
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：详解如何在vue项目中使用layui框架及采坑