系列背景：

本系列主要目的在於微信小程式和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",

        })
      }
    })

這樣，我們就完成了圖片的上傳和儲存。