最近一直都比較忙，堅(jiān)持月月更新博客的計(jì)劃不得中止了，今天抽出點(diǎn)時(shí)間來說說最近項(xiàng)目中遇到的一個(gè)問題，有關(guān)request post請(qǐng)求格式中的multipart/form-data格式。

引言

最近在參與一個(gè)項(xiàng)目過程中遇到一個(gè)問題，相信大部分人都遇到過：

在后端與前端約定好application/json格式傳遞數(shù)據(jù)時(shí)，因?yàn)楹笈_(tái)是go強(qiáng)類型語言，在定義api接口時(shí)，某些字段要求是整型類型，但是對(duì)于前端來說輸入框或者從url中的search取到的參數(shù)都是字符串，不得不進(jìn)行前端類型轉(zhuǎn)換。

咋一看，對(duì)于接口參數(shù)比較少的api前端轉(zhuǎn)換沒有什么，但是對(duì)于一般的交互復(fù)雜，參數(shù)比較多的接口，要對(duì)大部分參數(shù)進(jìn)行類型轉(zhuǎn)換就是一種吃力不討好的活。好在后端同學(xué)還支持另一種的前后端數(shù)據(jù)交互格式，即multipart/form-data。通過該格式后端取到前端傳遞的數(shù)據(jù)就是數(shù)字了(即使前端傳遞的是字符串)，而不像json格式獲取的是字符串。這樣，就不需要額外對(duì)前端獲取的數(shù)據(jù)進(jìn)行特殊轉(zhuǎn)換了。下面就來說說form-data。

form-data請(qǐng)求格式

multipart/form-data是基于post方法來傳遞數(shù)據(jù)的，并且其請(qǐng)求內(nèi)容格式為Content-Type: multipart/form-data,用來指定請(qǐng)求內(nèi)容的數(shù)據(jù)編碼格式。另外，該格式會(huì)生成一個(gè)boundary字符串來分割請(qǐng)求頭與請(qǐng)求體的，具體的是以一個(gè)boundary=${boundary}來進(jìn)行分割，偽碼如下：

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

--${boundary}
...
...

--${boundary}--

上面boundary=${boundary}之后就是請(qǐng)求體內(nèi)容了，請(qǐng)求體內(nèi)容各字段之間以--${boundary}來進(jìn)行分割,以--${boundary}--來結(jié)束請(qǐng)求體內(nèi)容。

具體可以參考下面例子：

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格式一般是用來進(jìn)行文件上傳的。使用表單上傳文件時(shí)，必須讓

表單的 enctype 等于 multipart/form-data，因?yàn)樵撝的J(rèn)值為application/x-www-form-urlencoded。

FormData對(duì)象

XMLHttpRequest Level 2添加了一個(gè)新的接口FormData。利用FormData對(duì)象，我們可以通過JavaScript用一些鍵值對(duì)來模擬一系列表單控件，我們還可以使用XMLHttpRequest的send()方法來異步的提交這個(gè)"表單"。

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

上面創(chuàng)建了一個(gè)FormData對(duì)象，通過fetch進(jìn)行ajax請(qǐng)求時(shí)，會(huì)自動(dòng)為其將其轉(zhuǎn)為form-data格式，無需手動(dòng)添加格式。

對(duì)象轉(zhuǎn)FormData對(duì)象

對(duì)于FormDat對(duì)象，像上面那種形式可以直接添加參數(shù)比較方便，但是對(duì)于對(duì)象或者嵌套對(duì)象：

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

上面形式添加formData參數(shù)user，并不會(huì)獲取到其真正的內(nèi)容，而是返回userObj的Object.prototype.toString.call(userObj)的值作為user字段的值。

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="user"

[object Object]

遺憾的是，F(xiàn)ormData對(duì)象沒有像JSON.stringify那樣的方法能批量將對(duì)象形式轉(zhuǎn)換為對(duì)應(yīng)的形式，formData而言是將對(duì)象的key轉(zhuǎn)換為正確formData請(qǐng)求參數(shù)字段名，例如如下對(duì)象：

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

這樣轉(zhuǎn)換為FormData對(duì)象時(shí)，其對(duì)應(yīng)的key應(yīng)該是下面這樣的：

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

這樣，就需要我們自己手動(dòng)來實(shí)現(xiàn)一個(gè)轉(zhuǎn)換數(shù)據(jù)函數(shù)，具體代碼如下：

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;
  
}

這樣，就可以將對(duì)象轉(zhuǎn)化為對(duì)應(yīng)的formData的格式了。

以上這篇基于form-data請(qǐng)求格式詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論