背景

微信小程序上傳文件是微信小程序提供的API之一，如果用JAVA后臺(tái)如何來(lái)處理上傳的文件呢？

官方文檔

UploadTask?wx.uploadFile(Object object)

將本地資源上傳到服務(wù)器?？蛻舳税l(fā)起一個(gè) HTTPS POST 請(qǐng)求，其中?content-type?為?multipart/form-data。

參數(shù)

Object object

屬性類型默認(rèn)值必填說(shuō)明最低版本

url	string	?	是	開發(fā)者服務(wù)器地址	?
filePath	string	?	是	要上傳文件資源的路徑 (本地路徑)	?
name	string	?	是	文件對(duì)應(yīng)的 key，開發(fā)者在服務(wù)端可以通過(guò)這個(gè) key 獲取文件的二進(jìn)制內(nèi)容	?
header	Object	?	否	HTTP 請(qǐng)求 Header，Header 中不能設(shè)置 Referer	?
formData	Object	?	否	HTTP 請(qǐng)求中其他額外的 form data	?
timeout	number	?	否	超時(shí)時(shí)間，單位為毫秒	2.10.0
success	function	?	否	接口調(diào)用成功的回調(diào)函數(shù)	?
fail	function	?	否	接口調(diào)用失敗的回調(diào)函數(shù)	?
complete	function	?	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）	?

object.success 回調(diào)函數(shù)

參數(shù)

Object res

屬性類型說(shuō)明

data	string	開發(fā)者服務(wù)器返回的數(shù)據(jù)
statusCode	number	開發(fā)者服務(wù)器返回的 HTTP 狀態(tài)碼

創(chuàng)建小程序與編寫代碼?

創(chuàng)建小程序就不說(shuō)了，如果不是開發(fā)小程序，也不會(huì)來(lái)搞上傳文件。上傳的關(guān)鍵代碼如下

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")}})

對(duì)于以上代碼上傳文件的關(guān)鍵參數(shù)有三個(gè)。

第一個(gè)參數(shù)：url。這個(gè)參數(shù)是服務(wù)器的地址。本文中，我們的服務(wù)器是在本地的Tomcat，那就自然而然的是 localhost:8080，也可以直接寫成? url: 'http://localhost:8080/uploadImage' 。 uploadImage　表示的是Controller的地址，下面會(huì)講到。

按照上文的寫法是因?yàn)槲以贏pp.js里面做了全局配置，

globalData: {host: 'http://localhost:8080',}

第二個(gè)參數(shù)：filePath。這個(gè)參數(shù)是我要上傳的文件?

第三個(gè)參數(shù) name，是為這個(gè)圖片對(duì)象設(shè)定的key。在Controller中用到。

JAVA后臺(tái)工程創(chuàng)建與編碼

JAVA后臺(tái)，也叫JAVA后端吧，總之就是服務(wù)器的意思。

這里面選擇的是Spring Boot 創(chuàng)建的Maven工程，在工程比中創(chuàng)建一個(gè)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")@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("圖片存儲(chǔ)成功");return "success";} }

需要注意的是

@PostMapping("/uploadImage") 要和微信小程序中的url參數(shù)中地址保持一致，
@RequestParam("img") 要和微信小程序中的name保持一致。

本地調(diào)試

本地調(diào)試的過(guò)程中首先要啟動(dòng)Spring boot的工程。

然后編譯小程序，去觸發(fā)上傳的事件。

記得開啟不校驗(yàn)合法域名。

本地調(diào)試結(jié)果?

真機(jī)調(diào)試?

?由于服務(wù)器是在本地開啟的，那么在真機(jī)無(wú)法訪問(wèn)本地服務(wù)器的情況下，必然是會(huì)失敗的。

后臺(tái)錯(cuò)誤的陷阱

假設(shè)我們的后臺(tái)發(fā)生了異常，那么微信小程序是沒(méi)法處理的。依然會(huì)當(dāng)成上傳成功處理。

修改代碼

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")@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("圖片存儲(chǔ)成功");throw new Exception("故意的，哈哈");} }

?再次本地觸發(fā)文件上傳事件。

結(jié)論： 要根據(jù)不同的返回結(jié)果，來(lái)判定文件是否到底上傳成功。

其他需要注意的地方

如果忘記寫? @ResponseBody? 注解，那可能是這種情況，雖然圖片上傳成功，但是返回給微信小程序的就不是我們預(yù)設(shè)的內(nèi)容了。

?

如果返回的是一個(gè)自定義的類，那么也會(huì)發(fā)生錯(cuò)誤。

/*** @author kangyucheng*/ @Controller public 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("圖片存儲(chǔ)成功");return new M("a","b");} } class M{String a;String b;public M(String a,String b){this.a = a;this.b = b;} }

總結(jié)

以上是生活随笔為你收集整理的深入讲解微信小程序上传图片与JAVA后台的结合的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。