Axios 多部分錶單數據 - 使用 JavaScript 通過表單發送文件

簡介

多部分/表單數據 是一種編碼類型，它允許在將文件傳輸到服務器進行處理之前將文件包含在表單數據中。其他編碼類型可用於實現非文件傳輸：

• 應用程序/x-www-form-urlencoded - 將數據編碼為查詢字符串 - 分離鍵值對（用 = 分配 )，帶有 & 等符號 .
• 多部分/表單數據 - 允許將文件包含在表單數據中。
• 文本/純文本 - 它以純文本（無編碼）形式發送數據，主要用於調試，而不是生產。

並且任何這些都可以通過（可選）enctype 添加到 HTML 表單標籤中 屬性：

<form action="/path/to/api" method="POST" encytpe="ENCTYPE_HERE">
</form>

它們以相當簡單的方式運行，您可能已經看到它們與 HTML <form> 一起使用 但是，在大多數情況下，默認值都適用於之前的標籤，因此通常會省略該屬性。

安裝 Axios

Axios 是一個基於 Promise 的（異步）HTTP 客戶端，在許多中存在和使用 Node.js 項目！使用 Axios 發送 HTTP 請求是很常見的，而不是 fetch() .

要在您的 Node 項目中使用 Axios - 您可以通過 npm 輕鬆安裝它 ：

$ npm install axios
# OR
$ yarn add axios

或者，您可以直接包含其 CDN（或將其文件下載到本地計算機）並將庫包含在您的標記中，如下所示：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

設置enctype 使用 Axios 和 HTML

要通過表單數據發送多部分數據（文件） - 您必須設置編碼類型。有幾種方法可以做到這一點，沒有明確或明確的“贏家”——它們最終在每個請求的功能上是等效的。使用 Axios - 可以設置默認的全局編碼類型：

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

這會強制所有 axios 請求為 multipart/form-data 編碼類型。或者，您可以通過更改 headers 來定義每個單獨請求的類型 ：

axios.post("/path/to/api", data, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
});

或者你可以設置 enctype <form> 中的屬性 特定表單的標籤，而 Axios 將簡單地採用該表單的編碼類型：

<form action="/some-endpoint" method="HTTP_METHOD" enctype="multipart/form-data">
</form>

Axios + Express

對於我們的示例，我們將創建一個包含兩個輸入的簡單表單，一個供用戶提交姓名，另一個供用戶選擇個人資料圖片：

<form action="/update-profile" method="post">
    <input type="text" name="username" placeholder="Enter name" />
    <input type="file" name="userPicture" />
    <button type="submit">Submit</button>
</form>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

不使用 Axios - 這將使默認的事件集展開。點擊“提交” 按鈕會發送一個 POST 請求 /update-profile 我們服務器的端點。但是 - 我們可以通過將事件偵聽器附加到按鈕並阻止默認事件來覆蓋此默認行為！

同樣，發送 Axios 請求需要異步性——我們可以在發送請求之前更改我們的標頭或自定義請求。讓我們附加一個事件監聽器，阻止默認行為並通過 Axios 發送我們的表單數據：

<script>

  const form = document.querySelector("form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    axios
      .post("http://localhost:5000/update-profile", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  });
</script>

注意： 同樣，您可以設置 enctype 的形式，或更改 headers 與 Axios。選擇權在你。

驚人的！當表格填寫完畢後，“提交” 單擊按鈕 - 請求被轉發到 http://localhost:5000/update-profile 端點，支持上傳文件。現在 - 讓我們定義接收這個請求並處理它的端點。

快速後端

對於我們的後端 - 啟動 REST API 的最簡單和最乾淨的方法是通過 Express.js，它處理設置服務器和處理請求的樣板 - 讓您專注於開發 而不是 設置 .

Express 本身效果很好 - 但它的目的是開箱即用，並且可以通過中間件進行擴展 .需要時，可以在其上安裝各種簡單（或複雜）的中間件，以擴展核心功能。

要使用 Express - 我們需要通過 npm 安裝它 .對於 Express 的簡單文件上傳處理，我們可以使用 express-fileupload 中間件，也可以通過 npm 輕鬆安裝 ：

$ npm install express express-fileupload 

現在，讓我們啟動一個服務器並定義一個接受我們的 POST 的端點 請求 /update-profile ：

// Import the library
const express = require("express");
var fileupload = require("express-fileupload");

// Create app instance
const app = express();

// Register and set up the middleware
app.use(fileupload());
app.use(express.urlencoded({ extended: true }));

// Request handler/endpoint
app.post("/update-profile", (req, res) => {
    let username = req.body.username;
    let userPicture = req.files.userPicture;
    res.send(`
      Your username is: ${username}
      Uploaded image name is: ${userPicture.name}
    `);
});

// Start up the server
app.listen(5000, () => {
    console.log("Server started on port 5000");
});

請求（req ) 傳遞給請求處理程序包含我們的表單發送的數據。它的主體 包含我們設置的字段中的所有數據，例如 username .任何和所有文件都將位於 files 下 req 的字段 對象！

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

當我們通過 HTML 頁面提交表單時，會向該 API 發送一個請求，我們會在瀏覽器控制台中收到以下響應：

Your username is: NAME_YOU_ENTERRED
Uploaded image name is: UPLOADED_FILE_NAME

此外，如果我們記錄 req.files.userPicture 本身到控制台，它返回關於我們文件的所有信息，比如文件名、編碼類型，以及與文件相關的其他信息。

結論

在本指南中，我們查看了 enctype 屬性並介紹了它是如何工作的。然後我們探索瞭如何設置 enctype 使用 Axios - 一個流行的異步 HTTP 庫，並發送 POST 包含多部分/文件數據的請求。

最後，我們創建了一個 REST API 來處理請求並接受傳入的文件和其他表單數據。

GitHub 上提供了源代碼 .