使用 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"];
}