背景
微信小程序上传文件是微信小程序提供的API之一,如果用JAVA后台如何来处理上传的文件呢?
官方文档
UploadTaskwx.uploadFile(Object object)
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中
content-type
为multipart/form-data
。参数
Object object
object.success 回调函数
参数
Object res
创建小程序与编写代码
创建小程序就不说了,如果不是开发小程序,也不会来搞上传文件。上传的关键代码如下
wx.uploadFile({url: getApp().globalData.host + '/uploadImage',filePath: "/images/full_cart.png",name: 'img',success: (res) => {console.log("upload succeed")var data = res.data;console.log(data);}, fail: () => {console.log("upload failed")}})
对于以上代码上传文件的关键参数有三个。
第一个参数:url。这个参数是服务器的地址。本文中,我们的服务器是在本地的Tomcat,那就自然而然的是 localhost:8080,也可以直接写成url: 'http://localhost:8080/uploadImage'。 uploadImage表示的是Controller的地址,下面会讲到。
按照上文的写法是因为我在App.js里面做了全局配置,
globalData: {host: 'http://localhost:8080',}
第二个参数:filePath。这个参数是我要上传的文件
第三个参数 name,是为这个图片对象设定的key。在Controller中用到。
JAVA后台工程创建与编码
JAVA后台,也叫JAVA后端吧,总之就是服务器的意思。
这里面选择的是Spring Boot 创建的Maven工程,在工程比中创建一个Controller,并编码。代码如下。
import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOException;/*** @author kangyucheng*/@Controllerpublic class UploadController {private final static Logger logger = LoggerFactory.getLogger(UploadController.class);@PostMapping("/uploadImage")@ResponseBodypublic String uploadImageFile(@RequestParam("img") MultipartFile uploadImage) throws IOException {String fileName = uploadImage.getOriginalFilename();String imgFilePath = "/Users/yuchk/Desktop/";File targetFile = new File(imgFilePath, fileName);//保存uploadImage.transferTo(targetFile);logger.info("图片存储成功");return "success";}}
需要注意的是
@PostMapping("/uploadImage") 要和微信小程序中的url参数中地址保持一致,
@RequestParam("img") 要和微信小程序中的name保持一致。
本地调试
本地调试的过程中首先要启动Spring boot的工程。
然后编译小程序,去触发上传的事件。
记得开启不校验合法域名。
本地调试结果
真机调试
由于服务器是在本地开启的,那么在真机无法访问本地服务器的情况下,必然是会失败的。
后台错误的陷阱
假设我们的后台发生了异常,那么微信小程序是没法处理的。依然会当成上传成功处理。
修改代码
import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOException;/*** @author kangyucheng*/@Controllerpublic class UploadController {private final static Logger logger = LoggerFactory.getLogger(UploadController.class);@PostMapping("/uploadImage")@ResponseBodypublic String uploadImageFile(@RequestParam("img") MultipartFile uploadImage) throws Exception {String fileName = uploadImage.getOriginalFilename();String imgFilePath = "/Users/yuchk/Desktop/";File targetFile = new File(imgFilePath, fileName);//保存uploadImage.transferTo(targetFile);logger.info("图片存储成功");throw new Exception("故意的,哈哈");}}
再次本地触发文件上传事件。
结论: 要根据不同的返回结果,来判定文件是否到底上传成功。
其他需要注意的地方
如果忘记写 @ResponseBody 注解,那可能是这种情况,虽然图片上传成功,但是返回给微信小程序的就不是我们预设的内容了。
如果返回的是一个自定义的类,那么也会发生错误。
/*** @author kangyucheng*/@Controllerpublic class UploadController {private final static Logger logger = LoggerFactory.getLogger(UploadController.class);@PostMapping("/uploadImage")@ResponseBodypublic M uploadImageFile(@RequestParam("img") MultipartFile uploadImage) throws Exception {String fileName = uploadImage.getOriginalFilename();String imgFilePath = "/Users/yuchk/Desktop/";File targetFile = new File(imgFilePath, fileName);//保存uploadImage.transferTo(targetFile);logger.info("图片存储成功");return new M("a","b");}}class M{String a;String b;public M(String a,String b){this.a = a;this.b = b;}}