卜若的程式碼筆記系列-微信小程式系列-第一章:上傳檔案給srpingboot伺服器-4001
阿新 • • 發佈:2018-12-13
系列背景:
本系列主要目的在於微信小程式和springboot之間的互動,至於微信小程式的相關基礎建議同學去其他部落格去學習。
備註:
1.因為我沒有業務域名,所以在做微信小程式的時候,無法使用真機進行訪問,使用開發版時,需要勾選禁止域名校驗
背景:
本篇博文主要講解如何通過按鈕上傳圖片到伺服器
1.首先,我們通過微信自帶的函式
wx.uploadFile({ url: 'http://localhost:8080/ajaxTest/uploadImage/form', filePath: tempFilePaths[0], name: "rawPic" })
可以訪問我們的伺服器,並且上傳檔案。
檔案資料來源於filePath,微信可以通過filePath訪問到這種圖片,並且將這張圖片轉換為multiple型別上(放到表單裡面)然後上傳給伺服器,上傳成功後,伺服器可以通過response返回一些資料
我們需要來觀測一下我們的控制器:
@PostMapping("/uploadImage/form") public void uploadImageByForm( @RequestParam(required=true,name="rawPic") MultipartFile rawPicFile ) { try { rawPicFile.transferTo(new File("D:\\temp\\uploadImageByForm.jpg")); } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } }
裡面具體的引數的詳細資訊請前往我得到springboot相關的部落格去了解,全部都有。
然後這裡最主要要描述的一點就是
從微信端傳遞過來的檔案的name 必須和
@RequestParam(required=true,name="rawPic")
裡面name相等,有過json基礎的同學很容易理解,因為我要從body體裡面去找到這張圖片就需要找一個識別符號,這個識別符號其實就是name
2.或許看完第一個小點,同學們有點迷茫的一個問題是
filePath: tempFilePaths[0],
這個是從哪裡來的。
這個其實可以指向你的圖片資料的url 。
我們可以通過一個wx.ChooseIamge()的函式得到你選擇的這張圖片的url
wx.chooseImage({
success: function (res) {
var tempFilePaths = res.tempFilePaths
console.log(tempFilePaths[0])
wx.uploadFile({
url: 'http://localhost:8080/ajaxTest/uploadImage/form',
filePath: tempFilePaths[0],
name: "rawPic",
})
}
})
這樣,我們就完成了圖片的上傳和儲存。