常见的前端content-type与Spring Boot的交互方式及文件上传

今天静下心来，整理一下常见的前端的不同content-type请求与Spring Boot的交互，包括上传文件.

常见的前端content-type

1. application/json ，用于发送json数据，是目前前后端分离开发，最常用的类型；
2. application/x-www-form-urlencoded ，用于发送表单数据，key-value形式存储；
3. multipart/form-data ，key-value形式存储，与application/x-www-form-urlencoded相比最大的区别就是可以上传文件；

Spring Boot的接收方式

1、application/json

前端

	//组织json改格式的参数
	var data = {
            "bysmcid": "1"
        };
        //发情请求
        $.ajax({
            dataType: "json",
            cache: false,
            headers: {
                "token": token
            },
            type: "POST",
            url: "../bysmc/getPhotoByBysmcid",
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (r) {
                if (r.code == 0) {
                   	//业务处理
                    }
                } else {
                    alert(r.msg);
                }
            }
        });

后端
@RequestMapping注解：用于标识方法名及请求方式
@@RequestBody注解：用于接收application/json时，data的参数
CaseInsensitiveMap paramMap：spring boot将data中的参数与key-value的形式进行转换到Map中

	@RequestMapping(value = { "/getPhotoByBysmcid" }, method = RequestMethod.POST)
	public R getPhotoByBysmcid(@RequestBody CaseInsensitiveMap paramMap) {
		String bysmcid=(String)paramMap.get("bysmcid");
		//其他业务处理
	}

2、application/x-www-form-urlencoded

前端

	<form action="http://localhost:8888/task/" method="POST">
		First name: <input type="text" name="firstName" value="Mickey&"><br>
		Last name: <input type="text" name="lastName" value="Mouse "><br>
		<input type="submit" value="提交">
</form>

后端
@RequestMapping注解：用于标识方法名及请求方式
@RequestParam 注解：用于接收application/x-www-form-urlencoded时，form表单的参数
CaseInsensitiveMap paramMap：spring boot将data中的参数与key-value的形式进行转换到Map中

    @RequestMapping(value = {"/task"}, method = RequestMethod.POST)
    public R task(@RequestParam Map<String, Object> params) {
      	String firstName=(String)params.get("firstName")
      	String lastName=(String)params.get("lastName")
		//其他业务处理
    }

3、multipart/form-data

前端

	<form class="form-horizontal" method="post" enctype="multipart/form-data" th:action="@{/uploadsimplefile}">
                <div class="form-group">
                    <label for="attachment" class="col-sm-2 control-label">文件上传：</label>
                    <div class="col-sm-5">
                    	<input type="text" name="param1" value="爱吃韭菜的袁某某"><br>
                        <input type="file" class="form-control" name="file1" id="file1"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">上传</button>
                    </div>
                </div>
            </form>

后端
@RequestMapping注解：用于标识方法名及请求方式
@RequestParam注解用于接收普通参数
MultipartFile file：接收上传的文件

	@RequestMapping(value = "/uploadsimplefile", method = RequestMethod.POST)
    public String uploadSimpleFile(@RequestParam("file1") MultipartFile file, @RequestParam("param1") String param1) {
        try {
            System.out.println(param1);
            String fileName = file.getOriginalFilename();
            File upload_file = new File("D:\\" + fileName);
            //上传文件
            file.transferTo(upload_file);
        } catch (Exception e) {
            return "上传失败";
        }
        return "上传成功";
    }