深入讲解微信小程序上传图片与JAVA后台的结合

背景

微信小程序上传文件是微信小程序提供的API之一，如果用JAVA后台如何来处理上传的文件呢？

官方文档

UploadTask wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。

参数

Object object

属性	类型	默认值	必填	说明	最低版本
url	string		是	开发者服务器地址
filePath	string		是	要上传文件资源的路径 (本地路径)
name	string		是	文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
header	Object		否	HTTP 请求 Header，Header 中不能设置 Referer
formData	Object		否	HTTP 请求中其他额外的 form data
timeout	number		否	超时时间，单位为毫秒	2.10.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
data	string	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码

创建小程序与编写代码 

创建小程序就不说了，如果不是开发小程序，也不会来搞上传文件。上传的关键代码如下

    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。这个参数是我要上传的文件 

扫描二维码关注公众号，回复： 11716186 查看本文章

第三个参数 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
 */
@Controller
public class UploadController {

    private final static Logger logger = LoggerFactory.getLogger(UploadController.class);

    @PostMapping("/uploadImage")
    @ResponseBody
    public 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
 */
@Controller
public class UploadController {

    private final static Logger logger = LoggerFactory.getLogger(UploadController.class);

    @PostMapping("/uploadImage")
    @ResponseBody
    public 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
 */
@Controller
public class UploadController {

    private final static Logger logger = LoggerFactory.getLogger(UploadController.class);

    @PostMapping("/uploadImage")
    @ResponseBody
    public 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;
    }
}