微信小程序+springboot+mybatis 前端图片随表单一起上传以及获取服务器图片的方法
data: {
links_type:'',
cameraList:[],
imgList: [],//存储图片临时地址
uploadcurrent: 0,
uploadImgList: [],//存储图片成功上传后，后端返回的服务器上图片存储位置
},
//关于调用视频和图片
// 点击添加选择
chooseSource: function () {
var _this = this;
wx.showActionSheet({
itemList: ["拍照", "从相册中选择"],
itemColor: "#000000",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
_this.imgWShow("camera") //拍照
} else if (res.tapIndex == 1) {
_this.imgWShow("album") //相册
}
}
}
})
},
// 点击调用手机相册/拍照
imgWShow: function (type) {
var _this = this;
let len = 0;
if (_this.data.imgList != null) {
len = _this.data.imgList.length
}
wx.chooseImage({
count: 10 - len,
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
wx.showToast({
title: '正在上传...',
icon: "loading",
mask: true,
duration: 1000
})
var imgList = res.tempFilePaths
let tempFilePathsImg = _this.data.imgList
var tempFilePathsImgs = tempFilePathsImg.concat(imgList)
_this.setData({
imgList: tempFilePathsImgs //将图片的临时地址存储到全局变量imgList中
})
//,()=>_this.uploadimagFile() 本来是在这个地方执行上传后端操作的
},
fail: function () {
wx.showToast({
title: '图片上传失败',
icon: 'none'
})
return;
}
})
},
// 预览图片
previewImg: function (e) {
let index = e.target.dataset.index;
let _this = this;
wx.previewImage({
current: _this.data.imgList[index],
urls: _this.data.imgList
})
},
/**
* 点击删除图片 也就是从imglist中删除对应图片临时地址
*/
deleteImg: function (e) {
var _this = this;
var imgList = _this.data.imgList;
var current=_this.data.uploadcurrent;
var index = e.currentTarget.dataset.index; //获取当前点击图片下标
wx.showModal({
title: '提示',
content: '确认要删除该图片吗?',
success: function (res) {
if (res.confirm) {
imgList.splice(index, 1);
current=current-1;
} else if (res.cancel) {
return false
}
_this.setData({
imgList,
uploadcurrent:current
})
}
})
},
// 图片上传服务
uploadimagFile(){
const that=this;
let imgListData = that.data.imgList;
let current=that.data.uploadcurrent;
console.log(imgListData)
for(let i=0;i<imgListData.length;i++){//循环遍历整个imglist，因为uploadFile方法只能一次上传一张图片
console.log(imgListData[i])
wx.uploadFile({
url: getApp().globalData.serverBaseUrl+'/Applets/wechatImg',//后端对应接口
filePath:imgListData[i],
name:'image',
success(res) {
console.log("返回的信息",res.data.url)
//let imgPath_url=().+().
let imgPath_url=JSON.parse(res.data).url
console.log(imgPath_url)
current=imgListData.length
that.data.uploadImgList=that.data.uploadImgList.concat(imgPath_url)
//('imgPath', )
console.log(that.data.uploadImgList)
that.setData({
uploadImgList:that.data.uploadImgList,//将后端返回的图片地址存入uploadImgList
//imgList:'',
})
wx.showToast({
title: '上传数据成功',
icon: 'success',
duration: 500,
success: function () {
// setTimeout(() => {
// ()
// }, 300)
}
})
},
fail: function (res) {
console.log('接口调用失败');
console.log(res);
}
})
}
},
/**
* 上传表单的方法的部分代码
*/
console.log('form发生了submit事件，携带数据为：', e.detail.value);
var that=this;
var shoptoken=that.data.token;
console.log(shoptoken);
this.uploadimagFile();//在这里调用上传图片的方法
console.log(that.data.uploadImgList);
console.log(that.data.videoPath_links)
setTimeout(()=>
{
wx.request({
url:getApp().globalData.serverBaseUrl+'/Applets/setShopKeeper',
//url:getApp().+'/Applets/login',
header: {'content-type': 'application/x-www-form-urlencoded'},
method: 'POST',
data: {
'shopposition': e.detail.value.shopposition,
'shopname': e.detail.value.shopname,
'realname': e.detail.value.realname,
'mobile': e.detail.value.mobile,
'maincontent': e.detail.value.maincontent,
'flow': e.detail.value.flow,
'token':shoptoken,
'photo':that.data.uploadImgList,//将服务器端图片地址随表单一起上传
},
success: function (res) {
if(res.data.code == 200){
wx.showModal({
title: '提示',
content: res.data.msg,
showCancel: true,
success: function (res) {
}
})
// ({
// })
}else{
wx.showModal({
title: '提示',
content: res.data.msg,
showCancel: false,
success: function (res) {
}
})
}
},
fail:function(res){
console.log(res);
}
})
}, 500)