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

在开发前端应用程序时，有时我们可能需要允许用户上传图像文件。稍后，我们可以处理图像文件，并在必要时将其发送到后端进行进一步处理和存储。最常见的图像文件格式是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中，并使用适当的头部编码类型将其发送到后端。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。