为什么前端上传图片传递给后端的时候,后端接到的值却是null?

思否 问答 👍 3 含 AI 优化版

问题

为什么前端上传图片传递给后端的时候,后端接到的值却是null?

在 SegmentFault 查看原问题 →

由大模型辅助整理,保留原意,优化结构与可读性。

问题概述

前端上传图片文件,后端使用 @RequestParam 接收时,取到的值却是 null,需要排查是前端还是后端的问题。

涉及技术(如有)

  • Spring @RequestParam / MultipartFile
  • HTTP Content-Typemultipart/form-data 等)
  • 浏览器 Network 面板排查、Postman 模拟请求

期望结果

定位文件上传接收为空的根本原因,并给出排查思路。

回答

原始回答

2023-03-15 @RequestParam("avatar") MultipartFile file, @RequestParam("id") int id 这看上去 也是不 file 是 avatar 啊?先定位是前端问题还是后端问题。前端查看 network 确定是否正确发出了请求后端使用 postman 之类的模拟请求,确认是否可以收到。两端都对的情况下,就是数据没发对,一般就是名称不对。有一端不对的情况下就一端先自己改对了,再说看了后面铁子的回答,确实啊,params 一般是用来取 get 请求的参数的,你文件得用 body。这里涉及到了 content-type 相关的知识,常见的有下面三种:application/jsonmultipart/form-data (支持文件上传,其他的都不行。当然base64之类的字符化替代方案不算)application/x-www-form-urlencoded更多类型可以看我的文章 前端培训-初级阶段-场景实战(2019-06-06)-Content-Type对照表及日常使用本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。

AI 优化 · 回答整理

解答思路

先明确问题出在前端还是后端,再对照参数名是否一致,最后确认请求的 Content-Type 是否支持文件上传。

示例代码(如有代码)

@PostMapping("/upload")
public void upload(@RequestParam("avatar") MultipartFile file, @RequestParam("id") int id) {
    // ...
}

详细说明

  • 排查顺序
    1. 前端打开浏览器 Network 面板,确认请求是否正确携带了文件字段。
    2. 后端用 Postman 之类的工具直接模拟同样的请求,验证接口本身能否正常接收文件。
    3. 如果两端各自测试都正常,问题往往出在字段名不一致:比如前端传的字段名是 file,但后端 @RequestParam 写的是 avatar,两者必须完全对应。
  • paramsbody 的区别@RequestParam 默认从请求参数(类似 GET 的 query 参数)中取值,而文件上传需要放在请求体(body)中,以 multipart/form-data 的形式提交。
  • 常见的 Content-Type 对比
    • application/json:不支持文件上传。
    • multipart/form-data:支持文件上传,也是文件上传的标准方式(Base64 字符串等间接方案不算真正的文件上传)。
    • application/x-www-form-urlencoded:不支持文件上传。

小结

文件传到后端为 null,多数情况是参数名不匹配或 Content-Type 用错导致的。建议先用 Network / Postman 分别定位是前端还是后端的问题,再核对字段名和 Content-Type 是否为 multipart/form-data

由大模型辅助整理,保留原意,补充结构与代码格式。

回答转载自 SegmentFault

评论

评论功能即将开放。你也可以通过 邮件GitHub Issue 反馈。