表单数据请求格式

我最近很忙，坚持认为不应停止每月更新博客的计划. 今天花一些时间讨论最近项目中遇到的一个问题，该问题与请求发布请求格式中的multipart / form-data格式有关.

我最近在参与项目的过程中遇到了问题. 我相信大多数人都遇到过它:

当后端和前端就应用程序/ json格式达成共识以传输数据时，由于后端是一种强类型语言，因此在定义api接口时，某些字段需要整数类型，但对于前端-end，输入框或URL中通过搜索获得的参数都是字符串，因此必须执行前端类型转换.

乍一看，没有什么接口参数很少的API前端转换，但是对于具有复互和很多参数的接口，转换大多数参数是一件费力的工作. 幸运的是，后端学生还支持另一种前端和后端数据交互格式，即multipart / form-data. 通过这种格式传递到前端的数据是一个数字（即使前端是一个字符串），不同于json格式是一个字符串. 这样，无需对前端获得的数据进行额外的特殊转换. 让我们谈谈表单数据.

multipart / form-data基于post方法传输数据dat用什么格式的文件，其请求内容格式为Content-Type: multipart / form-data，用于指定所请求内容的数据编码格式. 另外dat用什么格式的文件，该格式将生成边界字符串以拆分请求标头和请求正文. 具体来说，使用border = $ {boundary}进行拆分. 伪代码如下:

...
Content-Type: multipart/form-data; boundary=${boundary} 
--${boundary}
...
...
--${boundary}--

上面的boundary = $ {boundary}是请求正文的内容. 请求正文的字段除以-$ {boundary}，请求正文的内容以-$ {boundary}-结尾. 有关详细信息，请参考以下示例:

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyb1zYhTI38xpQxBK
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="city_id"
1
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="company_id"
2
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryyb1zYhTI38xpQxBK--

form-data格式通常用于文件上传. 使用表单上传文件时，表单的enctype必须等于multipart / form-data，因为此值的默认值为application / x-www-form-urlencoded.

XMLHttpRequest级别2添加了新接口FormData. 使用FormData对象，我们可以通过JavaScript模拟具有一些键-值对的一系列表单控件，还可以使用XMLHttpRequest的send（）方法异步提交此“表单”.

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); 
fetch('/users', {
  method: 'POST',
  body: formData
})

上面创建了一个FormData对象. 通过提取提出ajax请求时，它将自动转换为表单数据格式，而无需手动添加格式.

对于FormDat对象，像上面的表单一样直接添加参数更为方便，但是对于对象或嵌套对象而言:

 let userObj = {userName: ’xxx', age: '21'}
 formData.append('user', userObj)

以上述形式添加formData参数用户将不会获得其真实内容，但会返回userObj的Object.prototype.toString.call（userObj）的值作为用户字段的值.

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="user"
[object Object]

不幸的是，FormData对象没有像JSON.stringify这样的方法来将对象表单批量转换为相应的表单. FormData将对象键转换为正确的formData请求参数字段名称，例如以下对象: <

var obj = {
    a: '2', 
    b: {c: 'test'}, 
    c: [ 
        {id: 1, name: 'xx'}, 
        {id:2 ,name: 'yy', info: {d: 4} }
    ]
}

以这种方式转换为FormData对象时，对应的键应如下所示:

a: 2
b[c]: test
c[][id]: 1
c[][name]: xx
c[][id]: 2
c[][name]: yy
c[][info][d]:4

通过这种方式，我们需要自己手动实现数据转换功能. 具体代码如下:

function objectToFormData (obj, form, namespace) {
  const fd = form || new FormData();
  let formKey;
  
  for(var property in obj) {
      if(obj.hasOwnProperty(property)) {
        let key = Array.isArray(obj) ? '[]' : `[${property}]`;
        if(namespace) {
          formKey = namespace + key;
        } else {
          formKey = property;
        }
      
        // if the property is an object, but not a File, use recursivity.
        if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
          objectToFormData(obj[property], fd, formKey);
        } else {
          
          // if it's a string or a File object
          fd.append(formKey, obj[property]);
        }
        
      }
    }
  
  return fd;
    
}

通过这种方式，您可以将对象转换为相应的formData格式.

1. POST提交数据的四种常用方法

2. 转换formdata参数格式

2，要旨

3，获取

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shumachanpin/article-280282-1.html