卜若的代码笔记系列-微信小程序系列-第一章：上传文件给srpingboot服务器-4001

系列背景：

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

        })
      }
    })

这样，我们就完成了图片的上传和存储。