问题描述
最近在做一个项目时微信小程序端需要上传多张图片,并且还需要提交数据。
后台的设计是图片与该数据的实体类是多对一关系,使用SpringDataJpa进行数据保存,因此需要图片和数据同时提交到服务端进行保存。
但微信小程序只提供了单文件上传,不满足我的需求
https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html
wx.chooseImage({
success (res) {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = res.data
//do something
}
})
}
})
如上述代码是微信小程序开发文档提供的一个案例,filePath是需要上传文件的路径,formData可以放需要提交的数据
解决方案
文件上传代码
微信小程序端
fileUpload: function () {
var _this = this
var imgsrc = []
// uploadimgs是需要上传的文件列表
for (var i = 0; i < _this.data.uploadimgs.length; i++) {
wx.uploadFile({
url: serverUrl + ':8080/fileOperation/upload',
filePath: _this.data.uploadimgs[i],
name: 'image',
success(res) {
var rtData = JSON.parse(res.data)
imgsrc.push(rtData.data)
// 这里是为了使所有文件上传完成后再调用发送数据的代码
if (imgsrc.length == _this.data.uploadimgs.length) {
_this.subData(imgsrc)
}
}
})
}
}
微信小程序端通过循环遍历文件列表一个文件一个文件上传,并接收服务端返回的文件的信息保存起来,我这里是只需保存图片名,因此使用数组进行保存
服务端
@PostMapping("/upload")
public ResultVo fileUpload(@RequestPart(value = "image", required = true) MultipartFile image) {
//上传图片
try {
String mappingPath = FileUpload.transferTo(image, "images" + File.separator);
return ResultVoUtil.success("文件上传成功", mappingPath);
} catch (IOException e) {
e.printStackTrace();
return ResultVoUtil.error(500, "文件上传失败");
}
}
服务端接收文件保存起来并返回文件名给小程序端
数据提交代码
微信小程序端
subData: function (imgsrc) {
var _this = this;
var subDataUrl = app.globalData.serverUrl + ':8088/data/submit/'
// 这里使用循环将图片名拼接到请求地址中
for (var i = 0; i < imgsrc.length; i++) {
if (i == imgsrc.length - 1) {
subDataUrl += imgsrc[i].replace(/\\/g, "-")
break
}
subDataUrl += imgsrc[i].replace(/\\/g, "-") + ','
}
wx.request({
url: subDataUrl,
method: "POST",
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {
userName: _this.data.userName,
},
success(res) {
console.log(res)
}
})
}
数据提交这里尝试了将图片数组放在data中直接提交但并不行,因此这里放在了请求路径中,在后台使用获取请求路径中的参数进行接收
注:我这里图片存放是多级文件夹,因此小程序端需要进行字符串转化,不然在传递数据时会解析成路径
服务器端
@PostMapping("/submit/{images}")
public ResultVo submit(@RequestParam(value = "userName", required = true) String userName, @PathVariable @RequestPart(value = "images", required = true) List<String> images) {
// 这样就可以拿到图片名和数据了
System.out.println(userName);
return ResultV oUtil.success("上传成功");
}
这样后台就可以拿到图片名和数据,然后就可以进行相应的操作了
文件上传代码
微信小程序端
fileUpload: function () {
var _this = this
var imgsrc = []
for (var i = 0; i < _this.data.uploadimgs.length; i++) {
wx.uploadFile({
url: serverUrl + ':8080/fileOperation/upload',
filePath: _this.data.uploadimgs[i],
name: 'image',
success(res) {
var rtData = JSON.parse(res.data)
imgsrc.push(rtData.data)
if (imgsrc.length == _this.data.uploadimgs.length) {
_this.subData(imgsrc)
}
}
})
}
}
服务端
@PostMapping("/upload")
public ResultVo fileUpload(@RequestPart(value = "image", required = true) MultipartFile image) {
try {
String mappingPath = FileUpload.transferTo(image, "images" + File.separator);
return ResultVoUtil.success("文件上传成功", mappingPath.replace(File.separator, "-"));
} catch (IOException e) {
e.printStackTrace();
return ResultVoUtil.error(500, "文件上传失败");
}
}
数据提交代码
微信小程序端
subData: function (imgsrc) {
var _this = this
var subDataUrl = app.globalData.serverUrl + ':8088/data/submit/' + imgsrc
wx.request({
url: subDataUrl,
method: "POST",
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {
userName: _this.data.userName,
},
success(res) {
console.log(res)
}
})
}
服务器端
@PostMapping("/submit/{images}")
public ResultVo submit(@RequestParam(value = "userName", required = true) String userName, @PathVariable @RequestPart(value = "images", required = true) List<String> images) {
for (String image : images) {
image = image.replace("-", File.separator);
System.out.println(image);
}
System.out.println(userName);
return ResultV oUtil.success("上传成功");
}