微信小程序多文件上传并提交表单数据

#微信小程序多文件上传并提交表单数据| 来源: 网络整理| 查看: 265

问题描述

最近在做一个项目时微信小程序端需要上传多张图片，并且还需要提交数据。

后台的设计是图片与该数据的实体类是多对一关系，使用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 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 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 images) { // 这样就可以拿到图片名和数据了 System.out.println(userName); return ResultV oUtil.success("上传成功"); }

这样后台就可以拿到图片名和数据，然后就可以进行相应的操作了

以下是在服务端进行字符串的替换，个人认为相较于上边更加适合文件上传代码微信小程序端 fileUpload: function () { var _this = this var imgsrc = [] for (var i = 0; i 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 images) { for (String image : images) { image = image.replace("-", File.separator); System.out.println(image); } System.out.println(userName); return ResultV oUtil.success("上传成功"); }

【本文地址】

公司简介

联系我们