您的位置:首页 > 移动开发 > 微信开发

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

2019-05-05 18:01 716 查看

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

//点击选择图片
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: '图片加载失败',
})
}
})
}
})

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

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐