el axios 文件上传和下载

原创

mob64ca12ea4e24 2024-10-13 03:56:22 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12ea4e24的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Axios 实现文件的上传与下载

在现代 Web 应用中，文件上传和下载是一个非常常见的需求。使用 Axios 这个库，文件上传和下载变得简单而有效。本文将为你详细介绍如何用 Axios 实现文件的上传和下载。

整体流程

在实现文件上传和下载的过程中，我们可以将整个流程划分为以下几个步骤：

步骤	描述
1. 安装 Axios	在项目中安装 Axios 库
2. 文件上传	使用 Axios 进行文件的上传操作
3. 文件下载	使用 Axios 进行文件的下载操作

接下来我们将详细介绍每一步所需的代码和操作。

步骤详解

1. 安装 Axios

首先，你需要在项目中安装 Axios。如果你使用的是 npm，可以在终端中运行以下命令：

npm install axios

这条命令会把 Axios 库添加到你的项目依赖中。

2. 文件上传

文件上传通常需要一个文件输入框和一个提交按钮。以下是一个简单的文件上传表单的 HTML 代码示例：

<form id="uploadForm">
    <input type="file" id="fileInput" />
    <button type="submit">上传</button>
</form>

接下来，我们需要使用 Axios 来实现文件上传。请添加以下 JavaScript 代码：

// 导入 axios
import axios from 'axios';

// 获取表单元素
const uploadForm = document.getElementById('uploadForm');

// 监听表单提交事件
uploadForm.addEventListener('submit', async (event) => {
    event.preventDefault(); // 阻止表单的默认提交行为

    // 获取文件输入框
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0]; // 获取用户选择的文件

    // 创建一个 FormData 对象，用于发送文件
    const formData = new FormData();
    formData.append('file', file); // 将文件添加到 FormData 对象中

    try {
        // 使用 axios 发送 POST 请求，上传文件
        const response = await axios.post('/upload', formData, {
            headers: {
                'Content-Type': 'multipart/form-data' // 指定内容类型
            }
        });
        console.log('文件上传成功:', response.data); // 打印上传成功的消息
    } catch (error) {
        console.error('文件上传失败:', error); // 打印错误信息
    }
});

代码解释：

event.preventDefault(): 阻止表单的默认提交行为，以利用 Ajax 提交。
FormData: 用于创建一个可以发送键值对的对象，方便上传文件。
axios.post: 发送 POST 请求至指定的 URL（如 /upload），并将文件作为请求体发送。
Content-Type: 指定请求的内容类型为 multipart/form-data，这是 Upload 文件时所必需的。

3. 文件下载

文件下载通常是在用户点击一个链接后开始的。以下是实现文件下载的 JavaScript 示例代码：

// 下载文件的函数
async function downloadFile(filename) {
    try {
        const response = await axios.get(`/download/${filename}`, {
            responseType: 'blob' // 告诉 axios 返回的是 Blob 对象（文件）
        });

        // 创建一个 URL 对象，用于创建下载链接
        const url = window.URL.createObjectURL(new Blob([response.data]));

        // 创建一个链接并触发下载
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', filename); // 设置下载的文件名
        document.body.appendChild(link);
        link.click(); // 自动点击链接触发下载
        link.remove(); // 下载后移除链接
    } catch (error) {
        console.error('文件下载失败:', error); // 打印错误信息
    }
}

// 在某个按钮上绑定下载事件
document.getElementById('downloadButton').addEventListener('click', () => {
    downloadFile('example.txt'); // 用实际文件名替换
});