載說明：原創不易，未經授權，謝絕任何形式的轉載

在開發前端應用程序時，有時我們可能需要允許用戶上傳圖像文件。稍后，我們可以處理圖像文件，并在必要時將其發送到后端進行進一步處理和存儲。最常見的圖像文件格式是PNG、JPEG和JPG。

當用戶上傳圖片時，我們必須首先將文件內容嵌入為base64或文件，并將信息附加到formData中，然后再將其與請求體一起發送。

將圖像文件嵌入formData時，必須將其作為鍵值對包含在內。鍵應表示包含圖像文件的主體數據的名稱，相應的值應包含實際的圖像文件。我們還需要確保設置正確的頭部編碼類型為 multipart/form-data 。

multipart/form-data 是一種HTML表單編碼類型，用于當我們的表單包含任何 <input type="file"> 元素時使用。當一個表單包含文件輸入時，必須在HTML表單標簽的enctype屬性中使用"multipart/form-data"，以確保在服務器端進行正確的數據傳輸和處理。

formData提供了一個我們可以使用各種操作來操作的對象。其中一些最常見的操作包括：

1. formData.append（）：用于向指定對象鍵添加新值。
2. formData.get(): 用于檢索與特定鍵關聯的第一個值。
3. formData.delete(): 用于從formData對象中刪除鍵/值對。

圖片上傳

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios';
const selectedFile=ref();
async function onFileSelected(event: Event) {
  if (!event.target)
    return
  const target=event.target as HTMLInputElement
  if (!target.files) {
    // toastError('No image selected')
    return
  }
  console.log(target.files)
  selectedFile.value=target.files
}

async function submitImageForm(){
  const config={
    headers: {
      "Content-Type": "multipart/form-data",
    },
  };
  try{
  // Your backend endpoint for image upload
    const uploads_url='https://api.your-backend-url.com/upload';
    let formData=new FormData();
    formData.append("photo", selectedFile.value);
    const res=await axios.post(`${uploads_url}`, formData, config);
    const data=await res.json();
    console.log(data)
  }catch(error: unknown){
  // Catch errors here and handle them accordingly
    if (axios.isAxiosError(error) && error.response) {
      console.log(error.response.data.message)
      return
    }
    // handle other errors here 
    console.log(error)
  }
}
</script>

<template>
    <h2>Upload Image</h2>
    <form method="post" enctype="multipart/form-data">
        <label for="image">Select an image to upload:</label>
        <input type="file" id="image" name="image" accept="image/*" @change="onFileSelected">
        <br>
        <input type="submit" value="Upload Image" @click="submitImageForm">
    </form>
</template>

有一件重要的事情需要注意，那就是確保您使用與后端期望的formData一致的正確鍵名。這是必要的，因為它作為上傳圖像數據的標識符，并且后端將使用它來訪問請求負載中的圖像。

當您需要上傳多個圖片時，您可以像這樣將 multiple 屬性傳遞給輸入字段。

<input
  id="image"
  type="file"
  name="image"
  accept="image/*"
  @change="onFileSelected"
  multiple
/>

當您將上傳的圖像內容記錄到控制臺時，您將收到類似于下面截圖示例中顯示的元數據。

結論

我們已經看到了如何上傳圖像文件，提取圖像數據，將其附加到formData中，并使用適當的頭部編碼類型將其發送到后端。

由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。

客戶端和服務器之間傳遞數據既可以使用form-data ，又可以使用 x-www-form-urlencoded 。但是在使用時你有注意它們的區別嗎？

它們都是常見的 HTTP 請求體格式,通常用于POST請求。下面我們看看這倆貨有何區別。

1. x-www-form-urlencoded：

• 編碼方式： 數據以鍵值對的形式通過 URL 編碼進行傳輸。鍵值對之間使用 & 符號分隔，鍵與值之間使用 = 符號連接。空格會被轉換為 +，特殊字符會被轉換為 % 后跟兩位十六進制數。
• 用途： 主要用于傳輸簡單的表單數據，比如 HTML 表單提交時的默認編碼方式。它通常用于 HTTP 方法為 POST 的表單提交。
  例子：

    key1=value1&key2=value2&key3=value3
    
    # 完整協議內容
    POST /user HTTP/1.1
    Host: 127.0.0.1:8086
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 18

    name=osk&year=2019 

2. form-data：

• 編碼方式： 多部分表單數據，通常用于上傳文件或二進制數據。每個字段都有一個獨立的部分，每個部分包括一個頭部和一個數據塊，數據塊之間以及最后以特定的分隔符分隔。
• 用途： 主要用于支持文件上傳等場景，可以攜帶大量的文本數據和二進制數據。
  例子：

    ------WebKitFormBoundaryAbCdEf123456
    Content-Disposition: form-data; name="key1"

    value1
    ------WebKitFormBoundaryAbCdEf123456
    Content-Disposition: form-data; name="key2"

    value2
    ------WebKitFormBoundaryAbCdEf123456--
    
    # 完成協議內容
    POST /user HTTP/1.1
    Host: 127.0.0.1:8086
    Content-Length: 154
    Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

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

    869455062341318
    ------WebKitFormBoundary7MA4YWxkTrZu0gW--
 

總結：

如果你只是傳輸簡單的鍵值對數據，可以選擇使用 x-www-form-urlencoded。如果你需要上傳文件或二進制數據，那么 form-data 是更合適的選擇。在實際應用中，常見的場景是使用 x-www-form-urlencoded 進行普通表單提交，而使用 form-data 進行文件上傳。

討論現代網絡開發與 API 設計的語境下，理解客戶端和服務器間如何有效且可靠地交換數據變得尤為關鍵。這里，特別值得關注的是兩種主流數據格式：JSON 與 Form-data。盡管它們的終極目標一致，即數據傳輸的高效性和可靠性，但它們各自所具備的特點和應用情境卻大相徑庭，構成了數據傳輸的兩個主要途徑。

數據類型及其內容形式

JSON

• 概念：作為一種輕量級的數據交換格式，JSON (JavaScript Object Notation)旨在實現易于人類閱讀和編寫，同時也易于機器解析和生成。
• 內容形式：當采用 JSON 格式進行數據發送時，其內容類型（Content-Type）通常設置為application/json。
• 實例展示：

例如，在 Apifox 中發起一個攜帶 JSON 格式請求參數的 POST 請求。

Form-data

• 概念：Form-data，亦即表單數據，是一種在 HTML 表單與服務器進行交互時常用的編碼方式，尤其在處理文件上傳方面展現出獨特的兼容性。
• 內容形式：在使用 Form-data 格式發送時，其內容類型指定為multipart/form-data。
• 實例展示：如下所示， form-data 格式發起 POST 請求的一個例子。

深入分析數據交換的差異

盡管從表面上看，JSON 和 Form-data 主要的區別似乎僅在于內容類型和數據結構上，但它們在實際應用場景中的使用差異則進一步影響了它們的適用范圍。

應用情境

JSON

• 復雜數據模型：對于需要傳遞復雜數據結構的場景，如列表或嵌套對象等，JSON 表現出了極佳的適用性。
• API 互動：在設計 RESTful API 的過程中，JSON 幾乎是默認的選擇，其易讀性和結構化的特點讓開發者在創建及維護 API 的過程變得更簡單。

Form-data

• 文件上傳：在涉及文件上傳的場合，Form-data 顯得尤為重要，特別是當 Web 表單需要同時提交文件與數據時，Form-data 以其獨有的優勢脫穎而出。
• 傳統 Web 表單提交：對于那些基于 HTML 表單的傳統 Web 應用，Form-data 通常是首選，因為它能夠直接與表單元素互動而無需額外的 JavaScript 編碼。

性能比較

當評估 JSON 與 Form-data 在性能上的優缺點時，通常會將注意力集中在數據處理上。大體上，對于簡單數據結構的處理，JSON 以其純文本格式的優勢表現較佳。

另一方面，Form-data 在處理需要復雜編碼和分隔的大量小型數據時可能略顯低效。然而，在現代網絡條件下，這種性能差異大多數情況下是可以忽略不計的。

選擇指導

在 JSON 和 Form-data 之間的選擇，很大程度上取決于特定的使用需求：

• 如果你的目標是向服務器傳輸結構化或簡約的數據，并且不需要涉及文件上傳，那么選擇 JSON 可能更為理想。
• 對于涉及文件上傳的場景，特別是在 Web 表單應用中，Form-data 無疑是更適合的選擇。
• 當需要同時處理文件和數據的復雜場景時，Form-data 提供了一個全面的解決方案。

結語

在現代 Web 應用和 API 構建過程中，精確掌握并應用這兩種數據傳輸方式是至關重要的。隨著如 GraphQL 等新興技術的出現，數據傳輸領域的選擇與靈活性不斷增加。但無論技術如何演進，深入了解并掌握這些基礎概念，總能為你在技術選擇上提供有力支持。