Vue小知识:如何在前端处理上传文件
转载说明：原创不易，未经授权，谢绝任何形式的转载
在开发前端应用程序时，有时我们可能需要允许用户上传图像文件。稍后，我们可以处理图像文件，并在必要时将其发送到后端进行进一步处理和存储。最常见的图像文件格式是PNG、JPEG和JPG。
当用户上传图片时，我们必须首先将文件内容嵌入为base64或文件，并将信息附加到formData中，然后再将其与请求体一起发送。
将图像文件嵌入formData时，必须将其作为键值对包含在内。键应表示包含图像文件的主体数据的名称，相应的值应包含实际的图像文件。我们还需要确保设置正确的头部编码类型为 multipart/form-data 。
multipart/form-data 是一种HTML表单编码类型，用于当我们的表单包含任何 <input type="file"> 元素时使用。当一个表单包含文件输入时，必须在HTML表单标签的enctype属性中使用"multipart/form-data"，以确保在服务器端进行正确的数据传输和处理。
formData提供了一个我们可以使用各种操作来操作的对象。其中一些最常见的操作包括：
- formData.append（）：用于向指定对象键添加新值。
- formData.get(): 用于检索与特定键关联的第一个值。
- 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中，并使用适当的头部编码类型将其发送到后端。
由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。
