Vue3 实现文件上传功能

在Vue 3中实现文件上传功能，你可以使用多种方法，包括使用原生的HTML <input type="file"> 元素，或者使用第三方库如 axios 和 vue-axios 来处理文件上传。这里我将介绍两种常见的方法：

方法1：使用原生HTML <input type="file">

1. HTML部分：在Vue组件的模板中添加一个文件输入元素。

<template><div><input type="file" @change="handleFileUpload" /><button @click="submitFile">上传文件</button></div>
</template>

  2. Vue组件的script部分：添加方法来处理文件选择和上传。

<script>
export default {data() {return {selectedFile: null,};},methods: {handleFileUpload(event) {this.selectedFile = event.target.files[0]; // 获取第一个文件},submitFile() {if (!this.selectedFile) {alert('请选择一个文件');return;}const formData = new FormData();formData.append('file', this.selectedFile); // 将文件添加到FormData对象中// 使用fetch API发送文件fetch('你的上传URL', {method: 'POST',body: formData,}).then(response => response.json()).then(data => {console.log('Success:', data);}).catch((error) => {console.error('Error:', error);});}}
};
</script>

方法2：使用axios和vue-axios

首先，你需要安装axios和vue-axios（实际上，直接使用axios即可，因为vue-axios是axios的一个封装，用于Vue 2.x，在Vue 3中通常直接使用axios）。

1. 安装axios：

npm install axios

    2.HTML部分：与上面相同。

    3.Vue组件的script部分：使用axios来处理文件上传。

<script>
import axios from 'axios';export default {data() {return {selectedFile: null,};},methods: {handleFileUpload(event) {this.selectedFile = event.target.files[0]; // 获取第一个文件},submitFile() {if (!this.selectedFile) {alert('请选择一个文件');return;}const formData = new FormData();formData.append('file', this.selectedFile); // 将文件添加到FormData对象中// 使用axios发送文件axios.post('你的上传URL', formData, {headers: {'Content-Type': 'multipart/form-data' // 不需要显式设置，但为了清晰说明可以加上，因为默认就是这个类型。通常不需要手动设置。}}).then(response => {console.log('Success:', response.data); // 处理响应数据}).catch(error => {console.error('Error:', error); // 处理错误情况});}}
};
</script>

注意：对于multipart/form-data类型，通常不需要在请求头中显式设置Content-Type，因为FormData默认就是以multipart/form-data格式发送数据。但在某些情况下，如果你遇到问题，可以尝试加上这个头部。但在大多数现代浏览器中，这是自动处理的，不需要手动设置。 确保你的服务器端正确处理了multipart/form-data格式的请求。通常，这涉及到在服务器端使用如Node.js的multer库来处理这类请求。例如，如果你在使用Node.js和Express，你的服务器端代码可能看起来像这样：

const express = require('express');
const multer = require('multer'); // 引入multer库来处理multipart/form-data请求。 你可以自定义存储路径等选项。 例如：mul