vue3 +axios 文件上传和下载

Vue3 + Axios 文件上传及下载

在 Vue3 中，与后端进行文件上传和下载是一个常见需求。本文将介绍如何使用 Axios 进行文件上传和下载，以及如何在 Vue3 项目中实现这些功能。

文件上传

1. 后端准备

首先，我们需要在后端准备接口来处理文件上传。这里以 Node.js 和 Express 为例，使用 multer 中间件来处理文件上传。

安装所需的依赖：

npm install multer

在后端的路由中引入 multer 并配置上传的目标路径和文件名：

const express = require('express');
const multer = require('multer');

const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  // 文件上传成功后的逻辑
});

2. 前端实现

在 Vue3 项目中，我们使用 Axios 来发送文件上传请求。首先，在项目目录下安装 Axios：

npm install axios

然后，在需要上传文件的组件中引入 Axios：

import axios from 'axios';

接下来，创建一个 uploadFile 方法来处理文件上传请求：

methods: {
  async uploadFile() {
    const file = this.$refs.fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await axios.post('/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  },
}

在 HTML 模板中，我们需要添加一个文件上传的输入框和一个触发上传的按钮：

<input ref="fileInput" type="file" accept="image/*" />
<button @click="uploadFile">上传文件</button>

这样，当用户选择文件后点击上传按钮，文件将被发送到后端进行处理。

文件下载

1. 后端准备

在后端，我们需要提供一个接口来供前端下载文件。这里以 Express 框架为例，假设我们要下载的文件在 uploads/ 目录下。

在后端路由中添加下载文件的接口：

app.get('/download', (req, res) => {
  const filePath = 'uploads/example.txt';
  res.download(filePath);
});

2. 前端实现

在 Vue3 项目中，我们可以使用 a 标签的 download 属性来实现文件下载。首先，在需要下载文件的组件中创建一个 downloadFile 方法：

methods: {
  downloadFile() {
    const link = document.createElement('a');
    link.href = '/download';
    link.download = 'example.txt';
    link.click();
  },
},

在 HTML 模板中添加一个下载按钮，并调用 downloadFile 方法：

<button @click="downloadFile">下载文件</button>

这样，当用户点击下载按钮时，文件将被下载到本地。

结语

通过使用 Vue3 和 Axios，我们可以很方便地实现文件上传和下载功能。在文件上传中，我们使用 FormData 对象将文件数据发送到后端；在文件下载中，我们使用 download 属性和 a 标签来实现下载功能。这两个功能在实际开发中都是非常常见的，掌握它们可以让我们更好地完成前后端的交互。

以上就是关于 Vue3 + Axios 文件上传及下载的科普文章，希望对你有所帮助！