后台接收图片报错 request is not a multipart request 和 multipart boundary was found

request is not a multipart request 可能是因为前端没有指定请求头 Content-Type 为 multipart/form-data ，但是这个请求头不必在headers中指定。

如果直接在headers中指定，后端会因为检测不到 multipart boundary 而报错 the request was rejected because no multipart boundary was found 我们需要使用formData自动配置

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

———— https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

解决方案

前端：

          // 这种方式会自动配置 multipart boundary
					let formData = new FormData()
          formData.append('file', data, 'file.png')
          //调用接口
          const xmlhttp = new XMLHttpRequest()
          xmlhttp.open('POST', 'http://localhost:8080/user/upload/avatar', true)
          xmlhttp.send(formData)
          xmlhttp.onreadystatechange = function () {
						// 请求发送之后的回调
          }

formData.append(name, value, filename);

参数

• name

  value中包含的数据对应的表单名称。

• value

  表单的值。可以是USVString 或 Blob (包括子类型，如 File)。

• filename可选

  传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。

注意： 如果你指定一个 Blob 作为数据添加到 FormData 对象中， 文件名会被放在 “Content-Disposition” 头部（常常会根据浏览器变化而变化）传给服务器。

———— https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append

后端：

 @RequestMapping(value = "/upload/avatar", method = RequestMethod.POST)
    public Msg uploadAvatar(
            @RequestParam(value = "file") MultipartFile file,
            HttpServletRequest request
    ){
        // 文件判定
        if (null == file) {
            return Msg.fail().add("msg", "请选择要上传的图片");
        }
        if (file.getSize() > 1024 * 1024 * 10) {
            return Msg.fail().add("msg", "文件大小不能大于10M");
        }
        //获取文件后缀
        String suffix = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf(".") + 1);
        if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {
            return Msg.fail().add("msg", "请选择jpg,jpeg,gif,png格式的图片");
        }
        String savePath = null;
        try {
            savePath = " "; // 保存地址
        } catch (IOException e) {
            e.printStackTrace();
        }

        File savePathFile = new File(savePath);
        if (!savePathFile.exists()) {
            //若不存在该目录，则创建目录
            savePathFile.mkdir();
        }

        //用户头像名称就是用户的id
        String filename = user.getUserId() + "." + suffix;

        try {
            //将文件保存指定目录
            file.transferTo(new File(savePath + filename));
        } catch (Exception e) {
            e.printStackTrace();
            return Msg.fail().add("msg", "保存文件异常");
        }

//        //返回文件名称
        return Msg.success().add("suc", true);
    }

这样就可以了。

依然存在的缺陷

这种方式需要使用 XMLHttpRequest.send() ，而我在这个项目中使用的是统一管理的 axios ，使用这种方式会破坏项目的可维护性。

把formdata 传入已封装好的axios调用的时候，后端仍然报错 request is not a multipart request

这个问题还未解决，希望路过的大佬可以指点一二，未完待续。