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

问题描述

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

后台的设计是图片与该数据的实体类是多对一关系，使用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("上传成功");
}