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

微信小程序上传图片很简单：

//点击选择图片

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的含义

这里就选择了照片，可以显示在界面上

data-id='{{index}}' bindtap='delete'>

效果图：

然后是多图上传的过程，这里我上传到公司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: '图片加载失败',

})

}

})

}

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。