axios异步请求上传文件 java后端接收

mavonEditor 是一款不错的Markdown编辑器，在最近的使用中 图片上传困扰了我一会，好在后面解决了，所以写此篇博客来帮助一样有困扰的朋友们。

在mavonEditor的github地址上有一些关于图片上传的介绍，介绍中的图片上传有大致两种：

1. 上传到服务器返回图片地址
2. 直接将图片保存为base64编码
   说实在的第二种保存为base64编码的方法，看官方介绍和查询的一些资料着实让我摸不着头脑（如果有朋友实现了，麻烦教教我），所以我就放弃了第二种，选择了第一种。

如上图这是官方的介绍，给mavonEditor绑定了一个上传图片的事件，当有图片上传时，调用该事件方法。

// 绑定@imgAdd event
$imgAdd(pos, $file){
    // 第一步.将图片上传到服务器.
   var formdata = new FormData();
   formdata.append('image', $file);
   axios({
       url: 'server url',
       method: 'post',
       data: formdata,
       headers: { 'Content-Type': 'multipart/form-data' },
   }).then((url) => {
       // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
       // $vm.$img2Url 详情见本页末尾
       $vm.$img2Url(pos, url);
   })
}

对于我这种前端懂的不多的人来说，能看懂大概的代码意思，但又会有一些迷惑。比如： 异步请求带着文件向后端发送请求，那么java后端的controller层应该怎么接收这个文件呢？

如果是form表单的请求，可以根据input标签的name属性，在controller层通过注解 @RequestParam("name"),接收前端传过来的数据。（开始我以为@RequestParam只针对get请求，因为post请求我一般会用@RequestBody来接收数据，后面实验才知道，@RequestParam对于get，post请求都支持）.
而现在是发送的axios的异步请求，与表单发送的请求有点不一样，导致不知道后端的@RequestParam("name"),，中name应该怎么填写。
经过百度的查找资料和一次次的代码调试，最后发现，针对异步请求，有一个对象(js中的对象)FormData,对于这个对象我可能解释不能很到位，但我的理解是，异步请求中把数据整合像form那样发给后端。
发送异步请求时的代码块中：

axios({
     url: 'server url',
     method: 'post',
     data: formdata,
     headers: { 'Content-Type': 'multipart/form-data' },
 })

data放的formdata var formdata = new FormData(),就是一个FormData对象的实例化，然后通过append()方法往对象中存放数据
formdata.append('image', $file);，这样存放数据，前面的image 就可以看做是input标签的name属性，后面的就是值。类似于key:value这样的格式。

所以最后在controller层的代码就是这样的：

@PostMapping("/upload")
public R uploadFile(@RequestParam("image") MultipartFile file){
     String url = ossService.uploadFileToAliyun(file);
     return StringUtils.isEmpty(url) ? R.error():R.ok().data("url",url);
 }

这样就拿到了异步请求传过来的file了。

对于mavonEditor的文档另外提一下，里面代码的$vm 是mavonEditor这个编辑器的实例，而不是vue 这个实例，对于怎么拿到这个编辑器实例，文档中是这么写的：

不过我一般使用vue的ref这个属性来获取编辑器实例。