使用Vue.js和Axios向Java后端上传文件失败（返回400错误）的问题排查

让我帮你定位这个问题——你的curl请求能正常工作，但前端调用返回400，说明请求格式和后端的要求不匹配，导致请求在进入业务逻辑前就被拦截了。我们来对比curl和你的Vue代码：

核心问题：表单字段名不匹配 #

先看你的curl命令，上传文件时指定的表单字段是file：

curl --location --request POST 'http://localhost:8081/steg/aaa' --form 'file=@"/home/mycomputer/Files/image.png"' -o result.png

再看Vue代码里的FormData处理：

formData.append('image', this.selectedFile, this.selectedFile.name)

你这里用了image作为字段名，但后端的@RequestParam(value = "file", required = true)明确要求参数名为file，这就是导致400的直接原因——后端找不到必填的file参数，直接返回了错误。

快速修复 #

把Vue代码里的字段名从image改成file：

formData.append('file', this.selectedFile, this.selectedFile.name)

额外的优化建议 #

1. 校验必填项：后端的@PathVariable String text是必填的，如果你的secretText为空，请求URL会变成http://localhost:8081/steg/，这也会触发400。可以在上传前加个简单校验：

   onUpload() {
     if (!this.selectedFile || !this.secretText.trim()) {
       alert('请选择文件并填写秘密文本哦');
       return;
     }
     // 后续的FormData和请求逻辑
   }
   

2. 处理文件下载：你的curl命令用了-o result.png保存返回的文件，但当前Vue代码只打印了状态码，没处理后端返回的字节流。可以补充下载逻辑：

   axios.post(`http://localhost:8081/steg/${this.secretText}`, formData, {
     responseType: 'blob' // 告诉Axios返回的是二进制流
   })
   .then(response => {
     console.log(response.status);
     // 创建下载链接
     const blob = new Blob([response.data]);
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
     a.download = 'result.png';
     document.body.appendChild(a);
     a.click();
     // 清理资源
     window.URL.revokeObjectURL(url);
     document.body.removeChild(a);
   })
   .catch(err => {
     console.error('上传出错了:', err);
   })
   

3. 不要手动设置Content-Type：发送FormData时，浏览器会自动生成包含boundary的multipart/form-data请求头，手动设置反而可能导致格式错误，所以保持Axios的默认配置即可。

修改后，你的前端请求就和curl的逻辑完全一致了，应该能正常调用后端接口，不会再返回400错误啦。

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