摘要：當用戶完成選擇文件動作時，提交子頁面中的。從此我們上傳文件就歡欣鼓舞的來找了。因為的核心是對象，異步的實現(xiàn)是通過一個對象，一般簡稱該對象對。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。

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

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

// jsx
 

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

//  handleUpload 的實現(xiàn) 使用 fetch 請求
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"  // 不要加上這個文件類型說明
      },
      body: formData
            
    })
    .then(response => response.json())
    .catch(error => console.error("Error:", error))
    .then(response => console.log("Success:", response));
}

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

// template

    選擇文件
    上傳文件

//  上傳實現(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"  // 不要加上這個文件類型說明
      },
      body: formData
            
    })
    .then(response => response.json())
    .catch(error => console.error("Error:", error))
    .then(response => console.log("Success:", response));
}

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

從傳文件的歷史來回答傳文件問什么需要FormData 格式。

file 形式

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

它在chrome瀏覽器中是這個樣子:

選擇文件之后，點擊Upload 按鈕，文件開始上傳。

iframe形式

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

ajax + FormData 形式

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

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

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

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

當指定為"multipart/form-data"的時候，還需要指定 boundary=something。如果不指定則會自動分配。

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

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)造一組表示表單字段和它們的值的鍵值對，然后可以使用XMLHtRPROQuest.send（）方法輕松發(fā)送。如果一個表單設(shè)置編碼格式為 multipart/form-data, 這個表單將和FormData 使用相同的格式。

XHR

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

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

先來看fetch()幾種常見的用法:

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