摘要：當(dāng)用戶完成選擇文件動(dòng)作時(shí)，提交子頁(yè)面中的。從此我們上傳文件就歡欣鼓舞的來(lái)找了。因?yàn)榈暮诵氖菍?duì)象，異步的實(shí)現(xiàn)是通過(guò)一個(gè)對(duì)象，一般簡(jiǎn)稱(chēng)該對(duì)象對(duì)。這些回答基于自己理解，如有不妥，希望路過(guò)的大神輕噴，指正。

平時(shí)工作中經(jīng)常會(huì)遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。 我們分別來(lái)看一下element 和 antd 手動(dòng)上傳怎么處理：

antd官網(wǎng)有手動(dòng)上傳的demo:
在這里簡(jiǎn)單寫(xiě)一寫(xiě)實(shí)現(xiàn)，主要有 在jsx中引入U(xiǎn)pload組件，將 fileList 作為props傳入，fileList為選擇的文件列表，和 上傳函數(shù)的實(shí)現(xiàn)。

// jsx
 

         // Upload 為上傳組件
      
         Select File
      
    
    
        上傳文件
    

//  handleUpload 的實(shí)現(xiàn) 使用 fetch 請(qǐng)求
const handleUpload = () {
    const formData = new FormData();
    fileList.forEach((file) => {   // fileList 是要上傳的文件數(shù)組
      formData.append("files[]", file);
    });
    
    fetch(url: "http:just.a.url.demo", {
      method: "POST",
      headers: {
            credentials: "same-origin"
          // "Content-Type": "multipart/form-data"  // 不要加上這個(gè)文件類(lèi)型說(shuō)明
      },
      body: formData
            
    })
    .then(response => response.json())
    .catch(error => console.error("Error:", error))
    .then(response => console.log("Success:", response));
}

element 和antd 不同，通過(guò)上傳組件拿回的數(shù)據(jù)，element又封裝了一層，所以傳數(shù)據(jù)稍有不同。
以下是簡(jiǎn)單實(shí)現(xiàn):

// template

    選擇文件
    上傳文件

//  上傳實(shí)現(xiàn)

const handleUpload = () {
    const formData = new FormData();
    fileList.forEach((file) => {        
        formData.append("files[]", file.raw);  // 這里與antd 不同的是，文件真正數(shù)據(jù)為 file.raw 
    });
    
    fetch(url: "http:just.a.url.demo", {
      method: "POST",
      headers: {
            credentials: "same-origin"
          // "Content-Type": "multipart/form-data"  // 不要加上這個(gè)文件類(lèi)型說(shuō)明
      },
      body: formData
            
    })
    .then(response => response.json())
    .catch(error => console.error("Error:", error))
    .then(response => console.log("Success:", response));
}

雖然可以找得demo把文件傳輸了出去，但是心里有幾個(gè)問(wèn)題，如下：

從傳文件的歷史來(lái)回答傳文件問(wèn)什么需要FormData 格式。

file 形式

在最開(kāi)始的時(shí)候，文件上傳的傳統(tǒng)形式是使用 表單元素file。參照下面的代碼:

它在chrome瀏覽器中是這個(gè)樣子:

選擇文件之后，點(diǎn)擊Upload 按鈕，文件開(kāi)始上傳。

iframe形式

使用form元素比較簡(jiǎn)單，但缺點(diǎn)也比較明顯：上傳同步、上傳完成頁(yè)面會(huì)刷新；
在HTML5出現(xiàn)之前，想要實(shí)現(xiàn)文件異步上傳，只能通過(guò)iframe+form實(shí)現(xiàn);
其原理是:文件上傳時(shí)在頁(yè)面中動(dòng)態(tài)創(chuàng)建一個(gè)iframe元素和一個(gè)form元素，并將form元素的target屬性指向動(dòng)態(tài)創(chuàng)建iframe元素。當(dāng)用戶完成選擇文件動(dòng)作時(shí)，提交子頁(yè)面中的 form。這時(shí)，iframe跳轉(zhuǎn)，而父頁(yè)面沒(méi)有刷新。這使得上傳結(jié)束后，服務(wù)器處理結(jié)果返回到動(dòng)態(tài)iframe窗口而沒(méi)有刷新頁(yè)面；
具體code，這里不再枚舉，感興趣童鞋可以去 iframe+form 查看。

ajax + FormData 形式

哎呀，終于來(lái)到了現(xiàn)代社會(huì)，并且見(jiàn)到了咱們的主角 FormData。 ajax 大家肯定都知道了，異步刷新，無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，便能夠更新部分網(wǎng)頁(yè)。
那FormData 是什么呢？ FormData是XMLHttpRequest Level 2添加的一個(gè)新接口，他可以 構(gòu)建類(lèi)似表單的鍵值對(duì)， 也就是說(shuō)我們可以利用 FormData 來(lái)模擬表單控件，然后使用XMLHttpRequest的send()
方法來(lái)異步的提交這個(gè)"表單"。
看一下簡(jiǎn)單的使用 FormData傳文件的例子

選擇文件并上傳后，通過(guò)瀏覽器看看網(wǎng)絡(luò)情況。

啰啰嗦嗦這么多，終于知道了為什么傳文件要用FormData了！！開(kāi)心，簡(jiǎn)單來(lái)說(shuō)就是，傳文件一開(kāi)始設(shè)計(jì)使用 form 來(lái)傳，但是呢，使用form默認(rèn)的上傳方式存在諸多問(wèn)題，比如同步啦，我想在上傳之前處理一下數(shù)據(jù)啦，這個(gè)時(shí)候FormData 就站出來(lái)了，大喊 我可以構(gòu)建類(lèi)似表單的鍵值對(duì)，來(lái)模擬表單，發(fā)送的數(shù)據(jù)用我構(gòu)建的對(duì)象就可以上傳文件了。從此我們上傳文件就歡欣鼓舞的來(lái)找FormData了。
好了，另一個(gè)小問(wèn)題，文件和其他數(shù)據(jù)的不同，文件傳輸時(shí)是二進(jìn)制數(shù)據(jù)，所以格式和一般數(shù)據(jù)不一樣。 我們的FormData大俠不僅可以傳文件也可以傳一般數(shù)據(jù)哦，當(dāng)然傳輸數(shù)據(jù)有很多種方式，比如get請(qǐng)求的時(shí)候跟在url后面。

認(rèn)真看過(guò)問(wèn)題1的回答，這個(gè)問(wèn)題就很簡(jiǎn)單了。fetch api 是一個(gè)提供請(qǐng)求資源(包括通過(guò)網(wǎng)絡(luò))的接口，它和xhr(XMLHttpRequest)類(lèi)似。
所以請(qǐng)求不是為什么要用fetch，而是fetch 只是一種方法，可以用fetch也可以用xhr（參考問(wèn)題一中的 ajax + FormData demo），他們邏輯上是‘并列’的。
至于問(wèn)和AJAX 什么關(guān)系，不如說(shuō) Ajax 和 xhr什么關(guān)系。因?yàn)锳jax的核心是XMLHttpRequest對(duì)象， Ajax異步的實(shí)現(xiàn)是通過(guò)new 一個(gè) XMLHttpRequest對(duì)象，一般簡(jiǎn)稱(chēng)該對(duì)象對(duì)xhr。所以這里 fetch 是Ajax或XMLHttpRequest的一個(gè)替代方案。

當(dāng)指定為"multipart/form-data"的時(shí)候，還需要指定 boundary=something。如果不指定則會(huì)自動(dòng)分配。

ps: 這些回答基于自己理解，如有不妥，希望路過(guò)的大神輕噴，指正。

MDN上這樣解釋FormData:
The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method.It uses the same format a form would use if the encoding type were set to "multipart/form-data".
FormData 接口提供了一種方法，可以方便地構(gòu)造一組表示表單字段和它們的值的鍵值對(duì)，然后可以使用XMLHtRPROQuest.send（）方法輕松發(fā)送。如果一個(gè)表單設(shè)置編碼格式為 multipart/form-data, 這個(gè)表單將和FormData 使用相同的格式。

XHR

MDN 這樣介紹Fetch，F(xiàn)etch API 是和XHR類(lèi)似的用于獲取資源(包括通過(guò)網(wǎng)絡(luò))的一種接口方法，但是 Fetch API提供了更強(qiáng)大更靈活的API。fetch()便是其中一個(gè)全局方法。

Fetch和XHR平行關(guān)系，

先來(lái)看fetch()幾種常見(jiàn)的用法:

var url = "https://example.com/profile";
var data = {username: "example"};

fetch(url, {
  method: "POST", // or "PUT"
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    "Content-Type": "application/json"
  }
}).then(res => res.json())
.catch(error => console.error("Error:", error))
.then(response => console.log("Success:", response));

var formData = new FormData();
var fileField = document.querySelector("input[type="file"]");

formData.append("username", "abc123");
formData.append("avatar", fileField.files[0]);

fetch("https://example.com/profile/avatar", {
  method: "POST",
  body: formData
})
.then(response => response.json())
.catch(error => console.error("Error:", error))
.then(response => console.log("Success:", response));