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

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

在构建一个包含JSON对象和文件的HTTP POST请求时,我们可以利用FormData对象将数据组织成multipart/form-data格式,并通过XMLHttpRequest发送给服务器。下面是一个示例代码,展示如何将p_body字段设置为application/json内容类型,而其他非文件字段(如timestampsign)仍按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"];
	}
FormDataXMLHttpRequest 是用于上传文件和发送异步请求的两个重要的 Web API。 下面是使用 FormDataXMLHttpRequest 发送 POST 请求上传文件的示例代码: ```javascript // 创建一个 FormData 对象 const formData = new FormData(); // 添加文件到 FormData 对象 formData.append('file', fileInput.files[0]); // 创建一个 XMLHttpRequest 对象 const xhr = new XMLHttpRequest(); // 设置请求方式和 URL xhr.open('POST', '/upload'); // 发送 FormData 对象 xhr.send(formData); // 监听上传进度 xhr.upload.addEventListener('progress', (event) => { if (event.lengthComputable) { const percentComplete = event.loaded / event.total * 100; console.log(`上传进度: ${percentComplete.toFixed(2)}%`); } }); // 监听请求完成事件 xhr.addEventListener('load', (event) => { console.log('上传完成'); }); // 监听请求错误事件 xhr.addEventListener('error', (event) => { console.error('上传出错'); }); // 监听请求取消事件 xhr.addEventListener('abort', (event) => { console.warn('上传被取消'); }); ``` 上面的示例代码,通过 FormData 对象添加了一个文件,并将其发送到了服务器的 /upload 接口。同时,还监听了上传进度、请求完成、请求错误和请求取消等事件。 需要注意的是,如果要上传多个文件,可以通过循环添加的方式,或者使用多个 file input 元素来实现。同时,还需要根据具体的需求来设置 XMLHttpRequest 对象的其他属性,例如请求头、超时时间等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值