formData数据中添加JSON格式

什么是formData? MDN官网

FormData接口提供了一种方法来构造一组表示表单字段及其值的键/值对,这些键/值可以使用fetch()、XMLHttpRequest.send()或navigator.sendBeacon()方法发送。如果编码类型设置为“多部分/表单数据”,则它使用与表单相同的格式。

方法:

FormData.append():将一个新值追加到FormData对象内的现有键上,如果该键不存在,则添加该键

FormData.delete():从FormData对象中删除键/值对。

FormData.entries(): 返回一个迭代器,该迭代器遍历FormData中包含的所有键/值对。

FormData.get():从FormData对象中返回与给定键关联的第一个值。

FormData.getAll(): 从FormData中返回与给定键关联的所有值的数组。

FormData.has():返回FormData对象是否包含某个键。

FormData.keys(): 返回一个迭代器,该迭代器遍历FormData中包含的键/值对的所有键。

FormData.set(): 为FormData对象内的现有键设置一个新值,或者在键/值不存在的情况下添加该键/值

FormData.values():返回一个迭代器,该迭代器遍历FormData中包含的所有值。

问题1:批量上传多个文件

 let _params = new FormData()

  fileList.forEach((e: IAnyObject) => {
      _params.append('applyAttachmentRequest', e.file)
  })

问题2: 追加JSON数据

方法一:

let baseInfo = {name: 'zhangs', age: 20}  
let _params = new FormData()
 _params.append('jsonParams', JSON.stringify(baseInfo ))

方法二:

const _receptionInfo = {type: '标签一', label: '测试数据'}
let _params = new FormData()
_params.append('jsonParams', new Blob([JSON.stringify(_receptionInfo)], {type: "application/json",}))

推荐传递json使用方法二:

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: FormData格式可以用于传递JSON格式的参数。在JavaScript,可以使用FormData对象来创建一个表单数据对象,然后使用append()方法将JSON数据添加到该对象。例如: ``` var formData = new FormData(); var jsonData = {name: '张三', age: 20}; formData.append('data', JSON.stringify(jsonData)); ``` 在这个例子,我们创建了一个FormData对象,并将一个包含姓名和年龄的JSON对象添加到该对象。我们使用JSON.stringify()方法将JSON对象转换为字符串,并将其添加FormData对象。最后,我们可以将该FormData对象发送到服务器,以便服务器可以处理该JSON数据。 ### 回答2: 在前端开发,经常需要将参数以 JSON 格式传递给服务器端。而 FormData 格式是用于将表单数据序列化为键值对的一种方式,它最初是用于通过 AJAX 上传文件的。但是,实际上,我们也可以利用 FormData 来传递 JSON 格式数据。 一般情况下,我们发送请求时,要将 JSON 格式的参数序列化为字符串,然后将其放置在请求体,例如在使用 fetch 发送 POST 请求时: ``` fetch(url, { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json" } }) ``` 这里我们将 data 这个 JSON 对象序列化为字符串,并设置请求头的 Content-Type 为 application/json。这样服务器端就能够识别请求体JSON 格式数据,并进行相应处理。 而当我们使用 FormData 格式时,我们可以将 JSON 对象直接放入 FormData ,其余部分就和使用表单一样,例如: ``` const formData = new FormData(); formData.append("data", JSON.stringify(data)); fetch(url, { method: "POST", body: formData }) ``` 这里我们将 data 对象序列化为字符串,并将其放入 FormData ,然后使用 fetch 发送 POST 请求。在服务器端,我们可以获取到请求体名为 "data" 的键值对,将其内容进行 JSON 解析即可得到 JSON 对象。 值得注意的是,如果直接将 JSON 对象放入 FormData ,虽然能够传递成功,但并不是所有浏览器都支持。因此,为了兼容性,最好还是将 JSON 对象序列化为字符串再放入 FormData 。 ### 回答3: FormData 是一种用于在 AJAX 传输数据的简单 API,并且经常被用来上传二进制文件或者在表单提交数据。但是当需要把一段 JSON 格式数据通过 FormData 进行传递时,需要注意以下几点: 首先,许多人错误地认为可以直接将 JSON 对象传递给 FormData,但实际上不行。因为FormData对象不是一个简单的键/值对集合,而是通过HTTP多部分编码来传输整个表单,这意味着需要将JSON转换为一个字符串并设置为FormData的值,并且需要设置一个键来存储该字符串,以使之在服务器端得以正确识别。 其次,当使用 FormData 传递 JSON 数据时,还需要设置请求的 content type 为 application/json,这样服务器才能正确解析传递过来的数据。 最后,需要注意的是,如果 JSON 数据含有特殊字符,例如 & 或者 +,可以先对其进行 URL 编码,以确保它们被正确处理。 以下是一个示例代码: ```javascript var formData = new FormData(); var jsonData = { name: 'John', age: 30 }; formData.append('json', JSON.stringify(jsonData)); var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://example.com/api', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(formData); ``` 在这里,我们将 JSON 对象 `jsonData` 转化为字符串并放到 FormData 对象,以键值对的形式添加到请求,并设置请求头为 application/json。最后,我们使用 XMLHttpRequest 发送请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值