[JavaScript] 藉由 Fetch API 與 Form Data 來上傳檔案（Uploading files）

發表於 更新於 分類於 ， 閱讀次數：

Banner

上傳檔案是 Web 常用的應用之一，能使用的方式有相當多中，其中最常基本的方式就是將 HTML form 標籤上的編碼類型(enctype)設為 multipart/form-data，讓瀏覽器能針對檔案進行編碼。

這邊紀錄如何使用 JavaScript 的 Fetch API 來上傳檔案，使用 API 上傳檔案需透過建立一個 FormData 物件來當作請求內容。

範例程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Upload file
// 先取得使用者上傳的檔案
// ex. var selectedFile = document.getElementById('file').files[0];
var formData = new FormData();
formData.append('file', file); // 設定上傳的檔案
formData.append('id', 'aa01'); // 可以一起設定其他需要傳送的資料

fetch('你的 API 網址', {
  method: 'POST',
  body: formData,
  // Other setting you need
  // 不需要設定 'Content-Type': 'multipart/form-data' ，已經用 FormData 物件作為請求內容了
})
  .then((response) => response.json())
  .then((json) => {
    // Handle get result here.
  })
  .catch((error) => {
    // Handle error here.
  });

在 Chrome 的開發人員工具裡，查看此檔案上傳的內容，其顯示內容如下圖：

可以發現資料採用 Form Data 格式，而檔案轉 Binary 傳送給 API 了。

參考資料