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

Question

前端

<el-upload  :action="uploadPic(scope.row.id)"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      :show-file-list="false"
                      name="avatar"
          >
            <el-button size="small">更新图片</el-button>
          </el-upload>

后端

public Object updateSingerPic(@RequestParam("avatar") MultipartFile file, @RequestParam("id") int id) {
        String fileName = System.currentTimeMillis() + file.getOriginalFilename();
        String filePath = System.getProperty("user.dir") + System.getProperty("file.separator") + "img"
                + System.getProperty("file.separator") + "singerPic";
        File file1 = new File(filePath);
        if (!file1.exists()) {
            file1.mkdir();
        }
    }

在网上搜索的结果是前端输出的默认名称是file，但是不论修改name值还是不修改，后端接收到的都是null

Answer 1

@RequestParam("avatar") MultipartFile file, @RequestParam("id") int id 这看上去 也是不 file 是 avatar 啊？

• 先定位是前端问题还是后端问题。
• 前端查看 network 确定是否正确发出了请求
• 后端使用 postman 之类的模拟请求，确认是否可以收到。
• 两端都对的情况下，就是数据没发对，一般就是名称不对。
• 有一端不对的情况下就一端先自己改对了，再说

---

看了后面铁子的回答，确实啊，params 一般是用来取 get 请求的参数的，你文件得用 body。这里涉及到了 content-type 相关的知识，常见的有下面三种：

1. application/json
2. multipart/form-data (支持文件上传，其他的都不行。当然base64之类的字符化替代方案不算)
3. application/x-www-form-urlencoded

更多类型可以看我的文章 前端培训-初级阶段-场景实战（2019-06-06）-Content-Type对照表及日常使用

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

先在F12里看网络连接, 有没有发送数据. 没有就是前端的问题, 有就是后端的问题. 注意看请求头.

Answer 3

上传图片不应该是从请求体里面获取吗,你为什么用的是@requestParam
你定义一个实体类,把这两个当成参数,用@requestBody 接收试试

Answer 4

uploadPic这个方法是怎么写的