前后端数据传输格式(上)

本文介绍: 作为后端，写完接口一定要自测，而Po stm a n 可以说是最常用的接口测试工具了。但是在介绍Po stm a n的使用之前，我们需要复习一下GET/POST请求的一些细节。

作为后端，写完接口一定要自测，而Po stm a n 可以说是最常用的接口测试工具了。但是在介绍Po stm a n的使用之前，我们需要复习一下GET/POST请求的一些细节。据我观察，其实无论前端还是后端，很多人对POST的了解都不够：

&lt;dependencies&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        <artifactId&gt;spring-boot-starter-web</artifactId&gt;
    </dependency&gt;
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

@ServletComponentScan
@SpringBootApplication
public class RequestDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(RequestDemoApplication.class, args);
    }

}

@WebServlet(urlPatterns = "/upload")
@Slf4j
public class UploadServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String nameParam = request.getParameter("name");
        String ageParam = request.getParameter("age");

        log.info("GET请求 name:{}, age:{}", nameParam, ageParam);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String nameParam = request.getParameter("name");
        String ageParam = request.getParameter("age");

        log.info("POST请求 name:{}, age:{}", nameParam, ageParam);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h3>普通表单提交：默认enctype="application/x-www-form-urlencoded"</h3>
<form action="/upload" method="post">
    用户名:<input type="text" name="name"/><br>
    年龄:<input type="text" name="age"/><br>
    <input type="submit" value="提交"/>
</form>

</body>
</html>

所以POST表单请求默认编码方式是enctype="application/x-www-form-urlencoded"。我们从name=“周星驰”这个参数的乱码也可以看出，肯定经过了某种编码。

那么enctype="application/x-www-form-urlencoded"这种编码格式能不能上传文件流呢？比如，一个用户表单，能不能同时上传头像呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h3>普通表单提交：默认enctype="application/x-www-form-urlencoded"</h3>
<form action="/upload" method="post">
    用户名:<input type="text" name="name"/><br>
    年龄:<input type="text" name="age"/><br>
    选择文件：<input type="file" name="file"/><br>
    <input type="submit" value="提交"/>
</form>

</body>
</html>

@WebServlet(urlPatterns = "/upload")
@Slf4j
public class UploadServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String nameParam = request.getParameter("name");
        String ageParam = request.getParameter("age");

        log.info("GET请求 name:{}, age:{}", nameParam, ageParam);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String nameParam = request.getParameter("name");
        String ageParam = request.getParameter("age");
        // 根据参数名获取文件
        String fileParam = request.getParameter("file");

        log.info("POST请求 name:{}, age:{}, file:{}", nameParam, ageParam, fileParam);
    }
}

归根到底，造成这种现象的原因在于当前表单的编码格式不对。POST请求默认的编码格式是：enctype="application/x-www-form-urlencoded"，也就是对各个表单项的参数值进行URL编码后以name=xxx&age=xxx&file=xxx的形式放入请求体。

只要把POST请求的编码改为enctype="multipart/form-data"即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h3>文件表单提交：必须指定enctype="multipart/form-data"</h3>
<form action="/upload" method="post" enctype="multipart/form-data">
    用户名:<input type="text" name="name"/><br>
    年龄:<input type="text" name="age"/><br>
    选择文件：<input type="file" name="file"/><br>
    <input type="submit" value="提交"/>
</form>

</body>
</html>

我们观察一下设置enctype="multipart/form-data"后，请求体的变化：

-----------------------------5708493371455355810326359340
Content-Disposition: form-data; name="name"

å¨æé©°
-----------------------------5708493371455355810326359340
Content-Disposition: form-data; name="age"

18
-----------------------------5708493371455355810326359340
Content-Disposition: form-data; name="file"; filename="avatar.png"
Content-Type: image/png

PNG

@Slf4j
@RestController
public class UploadController {

    @PostMapping("/springUpload")
    public void upload(String name, Integer age, MultipartFile file) {
        log.info("name:{}, age:{}, fileName:{}", name, age, file.getOriginalFilename());
    }
}

none就是没有请求体，但编码还是默认的enctype="application/x-www-form-urlencoded"

有请求体，编码是默认的enctype="application/x-www-form-urlencoded"

@Data
public class UploadUser {

    /**
     * 姓名
     */
    private String name;
    /**
     * 年龄
     */
    private Integer age;
    /**
     * 地址
     */
    private String address;

}

@RestController
@Slf4j
public class UserController {

    /**
     * 新增用户
     * @param user
     * @return
     */
    @PostMapping("addUser")
    public UploadUser addUser(UploadUser user) {
        log.info("user:{}", user);
        return user;
    }
    
}