600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 深入讲解微信小程序上传图片与JAVA后台的结合

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

时间:2021-05-02 01:36:50

相关推荐

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

背景

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

官方文档

UploadTaskwx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中content-typemultipart/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;}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。