使用 XMLHttpRequest 和 FormData 发送混合内容类型请求

本文链接：https://blog.csdn.net/u013919303/article/details/136216615

本文详细介绍了如何通过XMLHttpRequest和FormData将JSON对象和文件一起发送到服务器，展示了如何设置不同字段的Content-Type，以及后端Java和C#的接收处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 XMLHttpRequest 和 FormData 发送混合内容类型请求

在构建一个包含JSON对象和文件的HTTP POST请求时，我们可以利用FormData对象将数据组织成multipart/form-data格式，并通过XMLHttpRequest发送给服务器。下面是一个示例代码，展示如何将p_body字段设置为application/json内容类型，而其他非文件字段（如timestamp和sign）仍按form-data方式处理。

var data = new FormData();
// 将p_body转换为JSON字符串并设置content-type
var pBodyJsonStr = JSON.stringify({ ctmid: "8A72C254-B970-4CBB-8BCC-81A3CC166B5C", jobid: "41340652" });
//实测 Blob 有问题 会产生filename="blob"
//data.append("p_body", new Blob([pBodyJsonStr], { type: "application/json" })); 
data.append("p_body", pBodyJsonStr);

data.append("timestamp", "1708421916");
data.append("sign", "d396f01b47dfa727c149cada5a0dba48");

data.append("p_file", fileInput.files[0], "/C:/test/123.docx");

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "http://xyzapij.51job.com/talent-domain/consumer/resumeAnalysis");
xhr.setRequestHeader("Token", "..."); // 填写完整的Token值

xhr.send(data);

注意：上述示例中将p_body作为JSON字符串封装在Blob中，并指定了Content-Type为application/json，这是一种特殊处理方式，通常需要服务端接口明确支持解析这种混合模式的数据。在实际应用中，请务必确认并遵循目标服务端接口的实际需求与规范。

附后端代码

java：

	import com.alibaba.nacos.common.utils.JacksonUtils;
	
	@RequestMapping(method = RequestMethod.POST, path = "/resumeAnalysis")
	public Result<?> resumeAnalysis(
	        @RequestPart("p_file") MultipartFile file,
        	//postman 能设置 Content-Type: application/json，但前端小伙伴遇到困难 因此改为String
        	//@RequestPart("p_body") AddSelectJobDTO addSelectJobDto, 
	        @RequestPart("p_body") String body,
	        @RequestPart("timestamp") String timestamp //用 Long 没成功
) throws Exception {
	    AddSelectJobDTO addSelectJobDto = JacksonUtils.toObj(body, AddSelectJobDTO.class);
	    ......
	    return ResultBuilder.success();
	}

c#：

	public void ResumeAnalysis()
	{
        HttpFileCollection files = Context.Request.Files;
        HttpPostedFile file = files [0];

        string p_body= System.Web.HttpContext.Current.Request["p_body"];
        JObject body = JObject.Parse(p_body);

        string timestamp= System.Web.HttpContext.Current.Request["timestamp"];
	}