FormData对象给字段的值设置Content-Type

最新推荐文章于 2025-04-25 20:04:29 发布
最新推荐文章于 2025-04-25 20:04:29 发布
阅读量5.3k 收藏 7
点赞数 3
文章标签： js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42772271/article/details/120365685
版权
本文介绍了一种使用FormData上传文件及JSON数据的方法。为解决FormData只能接收键值对的问题，文章提供了一个技巧：通过new Blob构造函数将JSON对象转换为Blob，并指定其Content-Type为application/json。

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

今天开发上传文件，遇到一个问题，需要用FormData的格式上传一个文件file，和一个对象，对象的Content-Type是application/json。
但是FormData的append和set，都只有两个参数：键值；
后面通过百度发现了解决方案。原文地址：FormData字段指定Content-Type；
通过new Blob()将需要设置Content-Type的value构建成Blob对象，对象的type是Content-Type是application/json
let fd = new FormData();
append(‘objectName’, new Blob([object], {type: ‘application/json’}));
在这里插入图片描述

Jmeter：HTTP请求，content-type中的multipart/form-data
l_q_l的专栏
06-06 2406
总结一下：1、Sampler中勾选Use multipart/form-data复选框来指定当前的content-type为multipart/form-data，而请求头Header Manager中，不要写content-type2、payload中有filename的部分，需要上传文件，在jmeter中的Files Upload中逐一指定参数名称，文件路径及文件类型；
get和POST请求Content-Type不同数据传参方式不同
qq_41842461的博客
07-31 1245
POST，get，Content-Type不同数据传参方式application/x-www-form-urlencoded, application/json, 和 multipart/form-data，qs.stringify的使用需求
上传文件修改参数的type
zhoutianxu1997的博客
07-07 1856
前端上传文件修改参数类型，以及上传时遇到的问题
利用FormData异步提交content-type为jpg,等流方面信息 --2016.04.20
hucheng91的专栏
10-18 2216
利用FormData异步提交content-type为jpg,等流方面信息 –2016.04.20平常在提交一个包含上传文件流信息都是使用form表单提交，最近在业务上需要异步提交图片，以前都是用一些js上传组键，这次没有用组键，最后找到了用FormData对像来提交信息。FormData的本质是将提交的东西伪装成了form表单，但是，是异步的<div><input type="file" id="
详解 http multipart/form-data
最新发布
抟土成人祖，炼石补青天。眼中览银河，手可摘星辰。
04-25 1570
是一种强大的 HTTP 内容类型，适用于上传文件和提交复杂表单。了解其格式和工作原理对于开发包含文件上传功能的 Web 应用至关重要。通过适当的客户端和服务器端实现，可以有效地处理从简单文本到大型二进制文件的各种数据。
formData传参，给传参添加content-Type
weixin_43945122的博客
04-25 4238
上传一个文件和一个JSON对象 对象的Content-Type是application/json。 通过new Blob()将需要设置Content-Type的value构建成Blob对象，对象的type是Content-Type是application/json const formm = { name:'张三', sex:'男' } const formData = new FormData formD
Content-Type: multipart/form-data； 上传文件
weixin_49115633的博客
01-13 8629
一、postman 模拟Content-Type: multipart/form-data请求头携带Content-Type: multipart/form-data;可以用来上传文件。当然，你也可以不上传文件，上传普通键值对。如下图，使用Postman 模拟提交数据。
formData 对象 与 Content-Type 类型
weixin_34341117的博客
01-28 1330
FormData 　　FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。 创建 FormData对象 　...
FormData表单多种contentType
程序员有点田blog
12-20 482
构建指定类型文件即可。
前端请求传参与后端匹配的接收方式&Content-Type类型
qq_39666711的博客
04-17 1535
是HTTP请求头中的⼀个标头，⽤于指示请求或响应中包含的实体的媒体类型，可以出现在请求或响应标头中。它告诉服务器如何处理客户端传过来的数据（通知服务器客户端正在发送的数据类型）、客户端如何处理响应中的数据。get请求的 headers 中是没有 content-type 这个字段的。content-type 是⽤来指定消息体的格式的，get请求⼀般没有消息体，所以，get 请求⼀般不⽤设置 content-type。
resttemplate设置支持content-type multipart/form-data； boundary=＜calculated w
Rockandrollman的博客
10-29 569
在使用 Spring 的 RestTemplate 来发送 multipart/form-data 请求时，特别是当你需要手动设置 Content-Type 边界（boundary）时，有一些特定的步骤需要遵循。通常，当使用 MultipartResolver 或类似的机制时，Spring 会自动处理这些内容，但有时你可能需要手动控制这些细节。
HttpClient 上传文件接口报错“missing content-type boundary” 原因解析
MK 乘风破浪~的博客
04-03 1万+
问题描述： 同事在使用HttpClient4.4.1版本上传文件时，接口报错“missing content-type boundary”。找我过来一起分析原因。部分代码如下： HttpPut uploadFile = new HttpPut(uri); uploadFile.setHeader("Authorization", ""); uploadFile.setHeader("Content-Type", "mult..
关于content-type的理解
qq_59076775的博客
09-15 716
告诉后端传过去的数据是什么类型的数据。
【HTML】FormData 模拟表单控件，提交 content-type 是 multipart/form-data
Milk~每天分享一点点，技术进步一点点
10-30 710
FormData 模拟表单控件，提交 content-type 是 multipart/form-data 看个例子: 输入框输入 12 时，发送请求的头部信息如下 ???? 原因 这是由于你提交的是 FormData 对象，不设置头的话 XMLHttpRequest 会调用 FormData 接口，默认将你的请求头设置为 multipart/form-data，相当于 form 表单提交设置 form 设置 enctype=“multipart/form-data” ,而表单默认 post 提交是
FormData，file，blob，dto对象给字段的值单独设置Content-Type
Li_Ning21的博客
12-02 1189
感谢提供思路 今天遇到一个有点怀疑人生的问题： 如图 后台给的swigger是这样的，在formData里传递一个 dto，还要求是json的格式； 但是我在swigger里并调不通，显示404， 但是postman中显示的是对的 请求后台改接口无果后，上网各种查，首先 formData 进行formData添加时，只能append参数名及值的，无法添加类型。且他会根据file，blob及string自动设置值的类型，经过查找blob； blob 发现 其实blob是可以进行类型设定的，形如： new
简单理解formdata，processData，contentType
weixin_45616519的博客
02-23 2734
一、在js中用FormData实例化一个空对象，就相当于在表单中建立一个空间 ，实例化对象后，使用append添加数据，之后执行ajax传递数据，此外在new 时可以传入表单form节点，需要先获取表单给一个对象放入括号中 contentType是指发送信息到服务器时内容的编码类型，contenttype发送数据流的形式，服务器根据编码类型使用特定的解析方式。 这里如果不把contentType...
Content-Type为form-data，前端数据处理
weixin_38706214的博客
02-02 9062
form-data格式一般是用来进行文件上传的。但后写的登录接口必须让入参以form-data格式传入 1、如果是使用的原生form写的，只需要在form标签上加上 **enctype=“multipart/form-data”**即可。 <form action="example.com" method="post" enctype="multipart/form-data"> 2、因为使用的antd中的Form表单组件，还有一种方法就是将传入的数据，利用FormData转成FormData
FormData 和 Content-Type: multipart/form-data
weixin_30521649的博客
09-04 9926
一、FormData 现代 Web 应用中频繁使用的一项功能就是表单数据序列化，XMLHttpRequest 2 级为此定义了 FormData 类型，FormData 为序列化表单以及创建与表单格式相同的数据（通过 JS 来模拟表单键值对）提供了便利。 let xhr = new XMLHttpRequest() xhr.onreadystatechange = fun...
Content-Type常见的两种格式：application/x-www-form-urlencoded和multipart/form-data详解
热门推荐
嘻嘻哈哈学技术
06-12 2万+
POST请求的两种编码格式：application/x-www-urlencoded是浏览器默认的编码格式，用于键值对参数，参数之间用&间隔；multipart/form-data常用于文件等二进制，也可用于键值对参数，最后连接成一串字符传输(参考Java OK HTTP)。除了这两个编码格式，还有application/json也经常使用。...
media-types 的设置Content-Type
02-22
### 设置 HTTP 请求头中的 Content-Type 当发送 HTTP 请求时，`Content-Type` 头用于告知服务器所发送数据的 MIME 类型。这有助于服务器理解接收到的内容格式并作出适当处理[^1]。 对于不同的场景，设置 `Content-Type` 的方式也有所不同： #### 使用 JavaScript 发送 AJAX 请求 通过 `XMLHttpRequest` 对象可以方便地自定义请求头部信息。下面是一个 POST 请求的例子，在此例子中设置了 `Content-Type` 为 `application/json`: ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/data'); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); // 明确指定了字符编码 xhr.send(JSON.stringify({ key: "value" })); ``` 如果要上传文件，则通常不需要手动设置 `Content-Type`，因为使用 `FormData` 构造函数创建的对象会自动处理 multipart/form-data 编码过程[^2]: ```javascript let formData = new FormData(document.getElementById("myForm")); // 添加额外字段到表单数据中 formData.append('extraField', 'someValue'); let xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.send(formData); ``` 在这种情况下，浏览器将会根据实际提交的数据来自动生成合适的边界字符串，并将其作为 `Content-Type` 值的一部分。 #### 利用 Fetch API 进行更简洁的操作 现代 Web 开发推荐采用 fetch() 方法替代传统的 XHR 方式。这里展示了如何利用该方法来设定 `Content-Type` 并执行 GET 或者 POST 请求： ```javascript fetch('/endpoint', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'param1=value1&param2=value2' }) .then(response => response.json()) .catch(error => console.error('Error:', error)); ``` 上述代码片段演示了向 `/endpoint` 路径发起带有 URL 参数序列化的 POST 请求的过程；而为了传输 JSON 数据，只需更改 `'Content-Type'` 属性值即可适应不同需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值