使用J*aScript File API与Axios模拟大文件上传_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用J*aScript File API与Axios模拟大文件上传

2025-10-20

浏览次数：次

返回列表

使用javascript file api与axios模拟大文件上传

本文介绍如何利用J*aScript的`File()`构造函数与Axios库，在无需真实文件的情况下，高效模拟大文件上传HTTP请求。此方法特别适用于测试文件大小限制、优化CI/CD流程，通过生成虚拟文件数据，实现自动化和无障碍的上传功能测试。

模拟大文件上传的必要性

在Web开发中，文件上传功能是常见的需求。然而，在进行自动化测试，特别是针对文件大小限制的测试时，使用真实的超大文件会带来诸多不便：它们占用大量存储空间，拖慢CI/CD流程，并且难以在不同测试环境中保持一致性。此时，模拟大文件上传成为一种高效且实用的解决方案，它允许开发者在不依赖物理文件的情况下，验证后端服务对大文件处理的健壮性。

核心工具：File() 构造函数

J*aScript的File()构造函数是创建虚拟文件对象的关键。它允许我们基于数据（例如字符串、Blob或ArrayBuffer）动态生成一个File对象，该对象在行为上与用户通过选择的文件对象几乎一致，可以被用于FormData并随HTTP请求发送。

File()构造函数的基本语法如下：

new File(fileBits, fileName, [options]);

fileBits: 一个数组，包含ArrayBuffer、ArrayBufferView、Blob或DOMString类型的数据。这些数据将按顺序连接起来，形成文件内容。
fileName: 字符串，表示文件的名称。
options (可选): 一个对象，可以包含以下属性：
- type: 字符串，指定文件的MIME类型（例如"image/png"、"text/plain"）。
- lastModified: 数字，表示文件最后修改的时间戳。

创建虚拟大文件

要模拟一个大文件，我们可以利用fileBits参数传入一个包含重复字符串的数组。通过重复一个较短的字符串多次，可以快速生成任意大小的虚拟文件数据。

商易多用户商城

功能介绍：1. 商品出售包含拍卖模式，一口价模式。2. 全套系统采用淘宝网风格，成熟，简洁大方3. 每个商品支持多张图片上传，可自由设定，满足广大网民的迫切要求4. 商品信息支持 ubb,图文并茂5. 注册用户可参与竞拍，或者拍卖自己的商品6. 拥有会员注册，交易提醒，成交商品确认等邮件发送功能7. 拥有交易双方信用评价的功能，使得交易安全可*，可信度高8. 拥有安全稳定的用户虚拟币平台，可实现商

0 查看详情商易多用户商城

以下是一个创建约10MB虚拟文件的示例：

// 定义一个基础字符串，例如10个字符
const baseString = "0123456789";
// 计算需要重复的次数以达到期望的文件大小
// 假设目标是10MB (10 * 1024 * 1024 字节)
// 每个baseString是10字节，所以需要重复 (10 * 1024 * 1024) / 10 次
const desiredSizeInBytes = 10 * 1024 * 1024; // 10 MB
const repeatCount = desiredSizeInBytes / baseString.length;

// 创建一个包含重复字符串的数组
// 注意：直接使用.repeat()生成超长字符串可能会导致内存问题，
// 更好的做法是将其分解为数组元素，或者使用Blob
const fileContentArray = [baseString.repeat(repeatCount)]; // 简化示例，实际可能需要分段

// 创建一个虚拟的File对象
const fakeBigFile = new File(
  fileContentArray,
  "large_simulated_file.txt",
  { type: "text/plain" }
);

console.log(`虚拟文件名称: ${fakeBigFile.name}`);
console.log(`虚拟文件大小: ${fakeBigFile.size} 字节 (约 ${fakeBigFile.size / (1024 * 1024)} MB)`);
console.log(`虚拟文件类型: ${fakeBigFile.type}`);

实现精确大小的策略： 为了更精确地控制文件大小，尤其是当目标大小不是baseString长度的整数倍时，可以在fileContentArray中添加不同长度的字符串，或者计算最后一个字符串的截取长度。

例如，创建一个10,485,761字节（10MB + 1字节）的文件：

const baseString = "0123456789"; // 10 bytes
const targetSize = 10 * 1024 * 1024 + 1; // 10MB + 1 byte

const fullRepeats = Math.floor(targetSize / baseString.length);
const remainingBytes = targetSize % baseString.length;

const contentParts = [];
for (let i = 0; i < fullRepeats; i++) {
    contentParts.push(baseString);
}
if (remainingBytes > 0) {
    contentParts.push(baseString.substring(0, remainingBytes));
}

const preciseFakeFile = new File(
  contentParts,
  "precise_large_file.bin",
  { type: "application/octet-stream" }
);

console.log(`精确虚拟文件大小: ${preciseFakeFile.size} 字节`);

使用 Axios 发送模拟文件

创建了虚拟File对象后，就可以像处理真实文件一样，将其添加到FormData对象中，并通过Axios发送HTTP请求。

import axios from 'axios';

// 假设我们已经创建了一个名为 fakeBigFile 的虚拟文件对象
// 例如，使用上面创建的 preciseFakeFile

const formData = new FormData();
// "file" 是后端API期望接收文件数据的字段名
formData.append("file", preciseFakeFile);
// 如果后端还需要其他表单数据，也可以一并添加
formData.append("description", "这是一个模拟大文件上传测试");

axios.post("/api/upload-big-file", formData, {
    headers: {
        // 当使用FormData时，Axios通常会自动设置正确的Content-Type为multipart/form-data
        // 但明确指定可以确保兼容性
        "Content-Type": "multipart/form-data",
    },
    onUploadProgress: (progressEvent) => {
        // 可选：监听上传进度
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        console.log(`上传进度: ${percentCompleted}%`);
    },
})
.then(response => {
    console.log("模拟大文件上传成功:", response.data);
    // 在这里处理成功响应，例如检查文件大小限制是否被正确处理
})
.catch(error => {
    console.error("模拟大文件上传失败:", error);
    // 在这里处理错误，例如检查是否因文件过大而被拒绝
    if (error.response) {
        console.error("服务器响应数据:", error.response.data);
        console.error("服务器响应状态码:", error.response.status);
    }
});

注意事项与最佳实践

内存消耗： 尽管是虚拟文件，但如果fileBits数组中的字符串或Blob非常大，它们仍然会占用客户端的内存。在生成超大文件（例如几GB）时，需要谨慎处理，避免浏览器内存溢出。对于极其巨大的文件，可能需要考虑在服务器端模拟或使用更高级的测试工具。
文件类型（MIME Type）： 在创建File对象时，务必设置正确的type选项，例如"image/jpeg"、"application/pdf"或"application/octet-stream"。后端服务通常会根据MIME类型进行验证，不匹配可能导致上传失败。
文件名称： fileName参数也很重要，后端可能会根据文件名称进行处理或存储。
后端验证： 模拟文件上传主要用于测试前端与后端接口的交互以及后端的文件大小限制。后端仍需对上传的文件进行完整的验证，包括文件内容、类型、安全性等。
测试场景： 除了测试文件大小上限，此方法也可用于测试：
- 文件大小下限（例如，不允许上传空文件）。
- 特定文件类型（通过设置type）。
- 文件名包含特殊字符的情况。
CI/CD集成： 将此模拟方法集成到自动化测试框架（如Jest、Cypress）中，可以确保在持续集成/持续部署流程中，文件上传功能，特别是其限制条件，得到有效验证，而无需额外的存储和传输开销。