载说明：原创不易，未经授权，谢绝任何形式的转载

在开发前端应用程序时，有时我们可能需要允许用户上传图像文件。稍后，我们可以处理图像文件，并在必要时将其发送到后端进行进一步处理和存储。最常见的图像文件格式是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 等新兴技术的出现，数据传输领域的选择与灵活性不断增加。但无论技术如何演进，深入了解并掌握这些基础概念，总能为你在技术选择上提供有力支持。