Axios提交FormData报application/octet-stream不支持问题排查

以下是几个常见问题点及解决方法：

1. 手动设置Content-Type导致边界缺失 #

Axios发送FormData请求时，会自动生成带boundary的multipart/form-data请求头（格式如multipart/form-data; boundary=----WebKitFormBoundaryxxx）。如果手动设置Content-Type: multipart/form-data，会丢失关键的boundary信息，后端无法正确解析请求体，进而将请求识别为application/octet-stream。

解决方法：删除手动设置的Content-Type配置，让Axios自动处理：

// 错误写法：手动设置Content-Type
axios.post('/api/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
})

// 正确写法：不手动设置Content-Type
axios.post('/api/upload', formData)

若必须手动设置（如特殊需求），需手动添加boundary：

const boundary = `----WebKitFormBoundary${Date.now()}`
axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': `multipart/form-data; boundary=${boundary}`
  }
})

2. FormData构造不规范 #

若FormData中的文件字段未正确添加，或字段类型不符合要求，后端可能无法识别文件部分，导致请求类型解析异常：

• 确保图片字段是File对象，而非base64字符串、普通对象等：

  // 正确：直接添加input获取的File对象
  const fileInput = document.getElementById('imageInput')
  formData.append('image', fileInput.files[0])
  
  // 错误：添加非File类型数据
  formData.append('image', 'some-string')
  

• 添加文件时可指定文件名和Content-Type，避免后端识别异常：

  formData.append('image', file, file.name)
  

• 确认标题等其他字段通过append方法添加字符串类型：

  formData.append('title', '文章标题')
  

3. 请求拦截器篡改请求头/请求体 #

检查项目中是否存在Axios全局拦截器，拦截器可能统一修改请求头（比如强制设置Content-Type为application/json），或把FormData转换为其他格式，导致请求头与实际请求体不匹配。

排查方法：暂时禁用拦截器测试请求是否正常；或在拦截器中增加判断，对FormData类型请求跳过Content-Type修改：

axios.interceptors.request.use(config => {
  // 仅当请求体不是FormData时，设置默认Content-Type
  if (!(config.data instanceof FormData)) {
    config.headers['Content-Type'] = 'application/json'
  }
  return config
})

4. Spring Boot后端配置/参数问题 #

后端也可能存在配置或参数注解错误：

• 确保接口方法用@RequestPart注解接收文件，而非@RequestParam（@RequestParam适用于简单参数，@RequestPart支持multipart请求中的复杂对象和文件）：

  // 正确写法
  @PostMapping("/api/upload")
  public ResponseEntity<?> upload(
      @RequestPart("title") String title,
      @RequestPart("image") MultipartFile image) {
      // 处理逻辑
  }
  

• 检查后端是否禁用了multipart支持，或配置的文件大小限制过小（导致请求被截断、解析异常）。Spring Boot默认启用multipart，若有自定义配置，确保以下配置正确：

  # application.properties
  spring.servlet.multipart.enabled=true
  spring.servlet.multipart.max-file-size=10MB
  spring.servlet.multipart.max-request-size=10MB
  

• 确认前端FormData中的字段名与后端@RequestPart/@RequestParam的参数名完全一致（大小写敏感）。

内容的提问来源于stack exchange，提问作者milanHrabos