在前端开发中，大文件上传功能是很多应用（如云存储、视频平台、企业管理系统）的刚需。但在开发阶段，为了验证上传逻辑是否稳定、进度条是否准确、后端能否处理分片等，每次都要找一个几百兆甚至几GB的真实文件不仅麻烦，还容易把开发环境塞满无用数据。其实，我们完全可以用代码模拟出“大文件”的外观，让Axios认为它正在上传一个巨大的真实文件，从而在不接触磁盘文件的情况下完成测试验证。
为什么需要模拟大文件上传
真实的大文件测试有几个痛点：
- 文件生成困难：临时找个几百兆的文件可能要从网上下载或自己用工具生成，效率低。
- 占用空间：反复的测试导致磁盘空间快速耗尽，清理麻烦。
- 进度控制不灵活：真实文件上传时间与网络环境强相关，难以稳定复现某个进度点的问题。
- 边界测试难：比如测试断点续传时，需要一个特定大小的文件来验证分片逻辑。
使用模拟大文件上传，我们可以自由控制文件大小、名称、类型，还能随时调整，让测试变得可重复、可掌控。
核心思路：用Blob与FormData“造假”
浏览器中的Blob对象可以存储任意二进制数据，并且可以指定大小。我们只需要创建一个指定字节数的Blob实例，然后把它包装成File对象（File继承自Blob），再通过FormData添加到请求体中，最后用Axios发送出去，就模拟出了大文件上传。
关键点：
- 使用
new Blob([new Uint8Array(size)])生成指定大小（字节）的二进制数据。 - 将
Blob转换为File对象：new File([blob], 'filename.ext', { type: 'application/octet-stream' })。 - 将
File对象放入FormData：formData.append('file', file)。 - 使用
axios.post(url, formData, { onUploadProgress })监听进度。
由于Blob只在内存中构造，不会写入磁盘，所以即便模拟一个1GB的文件，也只是在内存中分配对应大小的区域（注意浏览器内存限制）。
实战示例：模拟50MB文件上传并监控进度
下面我们以一个完整示例来演示整个过程。代码中模拟一个50MB（50 * 1024 * 1024 字节）的文件，上传到假设的后端地址https://upload.ipipp.com/api/upload（已按规则将ippipp.com替换为ipipp.com），并实时显示上传进度。
// 构造指定大小的 Blob（单位：字节）
function createMockFile(sizeInBytes, fileName = 'mockfile.bin', mimeType = 'application/octet-stream') {
const buffer = new ArrayBuffer(sizeInBytes);
const view = new Uint8Array(buffer);
// 填充一些数据，避免全零（可选）
for (let i = 0; i < sizeInBytes; i++) {
view[i] = i % 256;
}
const blob = new Blob([view], { type: mimeType });
return new File([blob], fileName, { type: mimeType });
}
// 模拟上传函数
async function uploadMockFile(sizeMB = 50) {
const sizeBytes = sizeMB * 1024 * 1024;
const file = createMockFile(sizeBytes, 'test_large_file.bin');
const formData = new FormData();
formData.append('file', file);
formData.append('description', '模拟大文件上传测试');
const url = 'https://upload.ipipp.com/api/upload';
try {
const response = await axios.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: function(progressEvent) {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`上传进度：${percentCompleted}% （已上传：${(progressEvent.loaded / 1024 / 1024).toFixed(2)} MB / 总计：${(progressEvent.total / 1024 / 1024).toFixed(2)} MB）`);
},
// 超时设置（毫秒）
timeout: 300000 // 5分钟超时
});
console.log('上传成功', response.data);
return response.data;
} catch (error) {
console.error('上传失败', error);
throw error;
}
}
// 调用
uploadMockFile(50);进度处理细节
在上述代码中，onUploadProgress回调是Axios提供的关键API。它会在发送请求过程中收到浏览器报告的上传字节数，我们可以根据loaded和total计算出百分比。注意：total是请求体的总字节数，其中包括了FormData中的边界分隔符等额外开销，可能会比实际文件大小略大，但这更接近真实场景。
如果需要模拟断点续传或分片上传，可以进一步调整：将大Blob切成多个小Blob（通过blob.slice()方法），然后逐个上传，并在每个分片请求中携带分片编号。这里不做展开。
注意事项
- 浏览器内存限制：不同浏览器对单个
Blob的大小有上限（通常为2GB左右），请根据目标环境调整模拟文件大小。 - 上传速度：虽然文件是内存中的虚拟数据，但浏览器依然会真实地将其内容读入请求体发送，因此网络传输速度与实际文件没有区别。
- 后端验证：如果后端对上传文件有校验（如魔数检查、文件类型判断），那么模拟的
application/octet-stream文件可能不会被正确识别。你可以根据后端需求调整File的type或填充特定的文件头字节。 - 跨域问题：在实际开发中，如果模拟上传的地址与本地页面不同源，记得配置后端CORS或使用代理。
总结
通过Blob和FormData结合Axios，我们可以轻松模拟出任意大小的文件上传场景，无需准备真实文件。这种方法让测试过程更可控、可重复，尤其适合在开发阶段快速验证上传逻辑、进度显示以及边界情况。配合onUploadProgress，我们还能模拟出精细的进度回调，帮助调试UI交互。下次需要测试大文件上传时，不妨试试这段代码，省时省力。