axios 二进制流转文件

原创

mob64ca12df5e97 2024-09-17 06:47:34 ©著作权

文章标签 ios javascript 下载文件 文章分类 iOS 移动开发

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

教你用 Axios 实现二进制流转文件

随着前端技术的普及，越来越多的开发者选择使用 JavaScript 进行网络请求。在日常开发中，常常需要从服务器下载文件或媒体，并将其保存为本地文件。本文将详细讲解如何使用 axios 库实现二进制流转文件的下载，包括必要的步骤、相关代码及注释，帮助初学者快速掌握这一技巧。

一、整体流程

在开始之前，让我们先了解一下整个操作的流程。以下是具体步骤表：

步骤	说明	代码示例
1. 安装 axios	在项目中安装 `axios` 库	`npm install axios`
2. 发起请求	使用 axios 发起请求下载文件	`javascript axios.get(url, config)`
3. 处理响应	将响应的二进制流数据处理为 Blob 对象	`new Blob([response.data], { type: 'application/octet-stream' })`
4. 创建 URL	使用 `URL.createObjectURL` 方法创建下载链接	`URL.createObjectURL(blob)`
5. 触发下载	创建一个链接元素并触发点击事件	`javascript link.click()`

二、详细步骤与代码示例

下面我们将逐步讲解每一个步骤，并提供相应的代码及注释。

1. 安装 axios

首先，你需要确保在项目中使用了 axios。在命令行中运行以下命令进行安装：

npm install axios

2. 发起请求

接下来，我们将使用 axios 发起一个 GET 请求来获取文件。请注意，由于需要处理二进制数据，我们需要设置响应类型为 arraybuffer。

import axios from 'axios';

// 创建函数来下载文件
const downloadFile = async (url) => {
    try {
        const response = await axios.get(url, {
            responseType: 'arraybuffer' // 设置响应类型为 arraybuffer
        });
        // 处理响应数据
        console.log("文件下载成功!", response);
    } catch (error) {
        console.error("下载文件失败:", error);
    }
};

// 调用函数
downloadFile('你的文件下载链接');

3. 处理响应

下载的响应数据需要转换为一个 Blob 对象，以便我们生成一个下载链接。这一步非常关键，因为 Blob 对象在浏览器中可以被视为文件。

// 处理响应数据
const blob = new Blob([response.data], { type: 'application/octet-stream' });

4. 创建 URL

接下来，我们需要创建一个可下载的 URL。这可以通过 URL.createObjectURL 方法实现。

// 创建下载链接
const url = URL.createObjectURL(blob);

5. 触发下载

最后，我们将创建一个隐藏的 <a> 标签，并通过 JavaScript 触发点击事件，实现文件的下载。

// 创建链接元素
const link = document.createElement('a');
link.href = url;
link.download = '文件名.ext'; // 设置下载文件的名称
document.body.appendChild(link); // 将链接添加到文档中
link.click(); // 触发点击事件
document.body.removeChild(link); // 下载后删除链接
URL.revokeObjectURL(url); // 释放 URL 对象

完整代码示例

将所有步骤整合在一起，完整的代码示例如下：

import axios from 'axios';

const downloadFile = async (url) => {
    try {
        const response = await axios.get(url, {
            responseType: 'arraybuffer'
        });
        
        const blob = new Blob([response.data], { type: 'application/octet-stream' });
        const downloadUrl = URL.createObjectURL(blob);
        
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = '文件名.ext';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(downloadUrl);
    } catch (error) {
        console.error("下载文件失败:", error);
    }
};

// 调用函数
downloadFile('你的文件下载链接');

三、前端与后端的关系

前端通过 axios 向后端请求文件，后端返回相应的二进制数据，整个过程如下图所示：

erDiagram
    USER {
        string id PK "用户 ID"
        string name "用户名称"
    }
    API {
        string id PK "API ID"
        string url "请求 URL"
    }
    FILE {
        string id PK "文件 ID"
        string name "文件名称"
        binary content "文件内容"
    }
    
    USER ||--o{ API : "请求"
    API ||--o{ FILE : "返回"