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