在后端使用 multipart/form-data 和 SpringBoot 发送文件答案

【问题标题】：Sending file using multipart/form-data and SpringBoot on backend在后端使用 multipart/form-data 和 SpringBoot 发送文件
【发布时间】：2020-02-23 16:45:21
【问题描述】：

我正在尝试使用 axios 从 vue.js 发送文件并在基于 spring 的后端接收它。这是我的前端部分：

uploadMap(context, map){

      console.log('uploading map...')
      const formData = new FormData();

      formData.append("file", map);

      axios.post("/info/map/upload", formData)
          .then(function (result) {
            console.log(result);
          }, function (error) {
            console.log(error);
          });
    },

在后端：

@PostMapping(consumes = MediaType.MULTIPART_FORM_DATA_VALUE, value = "/info/uploadFile")
    public void uploadFile(@RequestParam("file") MultipartFile file) throws IOException {

        System.out.println("file uploaded");

        String basePath = "/Users/admin/software/app1/uploads/";

        String filePath = basePath + file.getOriginalFilename();
        File dest = new File(filePath);
        file.transferTo(dest);
    }

后端部分在使用 Insomnia/Postman 进行测试时有效。但是当我想调用我的前端代码时，我得到了支持：

2020-02-23 17:38:52.038  WARN 61799 --- [nio-5000-exec-5] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundary2cAmVUpGnPfkQax3' not supported]

我应该如何处理？提前谢谢？？？

【问题讨论】：

前端使用路径/info/map/upload，而控制器的方法有不同的映射。没事吧？

标签： spring vue.js axios multipartform-data

【解决方案1】：

将依赖项添加到您的 Maven 配置中：

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

然后用特殊名称注册新的bean：

@Bean(name = "multipartResolver")
public CommonsMultipartResolver multipartResolver() {
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
    return multipartResolver;
}

【讨论】：