Vue3 上传文件

什么是文件上传？

文件上传是指将本地计算机上的文件发送到远程服务器或云存储。这是在 Web 开发中常见的需求之一，常用于网站的图片上传、附件上传等功能。

在 Vue3 中，我们可以利用现代化的技术来实现文件上传功能。下面将详细介绍如何使用 Vue3 实现文件上传功能，并提供一些示例代码和运行结果。

准备工作

在开始之前，我们需要确保已经安装了最新版本的 Vue CLI。如果还没有安装，可以通过以下命令进行安装：

npm install -g @vue/cli

安装完成后，我们可以使用 Vue CLI 创建一个新的 Vue 项目。执行以下命令：

vue create file-upload

安装依赖之后，我们可以进入到项目目录并启动开发服务器：

cd file-upload
npm run serve

实现文件上传

创建上传组件

首先，我们需要创建一个组件用于文件上传。在 src/components 目录下，创建一个名为 FileUploader.vue 的文件，然后在文件中输入以下代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadFile" />
    <button @click="upload">上传</button>
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile() {
      const file = this.$refs.fileInput.files[0];
      this.file = file;
    },
    upload() {
      const formData = new FormData();
      formData.append("file", this.file);

      // 在此处添加上传文件的逻辑
    },
  },
};
</script>

在这个组件中，我们创建了一个文件输入框和一个上传按钮。当用户选择文件后，uploadFile 方法会将选择的文件保存到 file 变量中。当用户点击上传按钮时，upload 方法会将文件发送到服务器。

添加文件上传逻辑

在 upload 方法中，我们使用了 FormData 对象来构建上传的数据。FormData 对象可以用来模拟表单提交，并支持添加文件。

在真实的应用中，我们通常会发送文件到服务器，并在服务器端进行相应的处理。这里我们假设服务器端会返回一个上传成功的响应。

我们可以使用 Axios 库来发送文件。在项目中执行以下命令来安装 Axios：

npm install axios

然后在 upload 方法中添加以下代码：

import axios from "axios";

// ...

  upload() {
    const formData = new FormData();
    formData.append("file", this.file);

    axios
      .post("https://example.com/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then(() => {
        alert("上传成功");
      })
      .catch(() => {
        alert("上传失败");
      });
  },

在这段代码中，我们使用 Axios 的 post 方法发送了一个 POST 请求到指定的服务器地址。我们将 formData 作为请求的数据，并设置 Content-Type 请求头为 multipart/form-data，以支持文件上传。

根据服务器端的实现情况，你可能需要修改请求地址和请求头。

在页面中使用上传组件

当我们已经创建好了文件上传组件后，我们可以在页面中使用它了。在 src/App.vue 中，将以下代码添加到模板中：

<template>
  <div id="app">
    <FileUploader />
  </div>
</template>

<script>
import FileUploader from "./components/FileUploader.vue";

export default {
  name: "App",
  components: {
    FileUploader,
  },
};
</script>