Vue 中如何实现文件上传功能？
在现代 Web 应用程序中，文件上传已成为一项非常基本的功能。无论上传文档、图片、视频或其他文件类型，我们可能经常需要实现文件上传功能。那么，如何在 Vue 中实现文件上传呢？
1.通过 Form 表单上传文件
最常见的文件上传方式是通过 Form 表单提交方式实现。在 Vue 应用程序中，我们可以使用的传统方式是将 <input type="file"> 元素添加到表单中，然后将表单提交到服务器端。当我们点击上传按钮时，浏览器会弹出一个文件选择窗口，用于选择并上传文件。
在 Vue 应用程序中，我们可以使用 Vue 的模板语法轻松地实现传统表单上传。我们将文本字段和文件字段添加到一个表单中，并使用 v-model 绑定它们。以下是一个简单的表单示例：
<template>
<form @submit.prevent="handleSubmit">
<input type="text" v-model="name" />
<input type="file" v-model="file" />
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
file: null,
}
},
methods: {
handleSubmit() {
const formData = new FormData();
formData.append('name', this.name);
formData.append('file', this.file);
// 在此处调用 AJAX 方法将 FormData 上传到服务器
},
},
};
</script>
在上面的代码中，我们通过 FormData API 将文本字段和文件字段添加到表单数据中。然后，我们将创建的 FormData 对象作为 AJAX 请求体将表单数据上传到服务器。
但是，这种方式不太适合在单页应用程序中使用。我们在单页应用程序中使用 Vue 通常使用第二个传统方式。
2.使用 Axios 上传文件到服务器
Axios 是目前最流行的 HTTP 客户端库之一。我们可以使用 Axios 轻松地将文件上传到服务器。以下是一个使用 Axios 的文件上传示例：
<template>
<div>
<input type="file" @change="onFileSelected">
<button @click="upload">Upload</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
selectedFile: null,
}
},
methods: {
onFileSelected(event) {
this.selectedFile = event.target.files[0];
},
upload() {
const formData = new FormData();
formData.append('file', this.selectedFile);
axios.post('/api/upload', formData).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error.response.data);
});
},
},
};
</script>
在上面的代码中，我们首先定义了一个用于选择文件的输入字段。然后，我们通过 @change 监听其更改事件，以便正确选择文件。当用户单击上传按钮时，我们将选定的文件添加到 FormData 表单数据中，并将其发送到服务器，这是通过使用 Axios.post() 实现的。
总的来说，这是在 Vue 应用程序中实现基本文件上传的方法。我们可以根据需求使用这些方法，并根据具体需求添加更多高级和复杂的逻辑。