Mock模拟大文件切片上传的核心是拦截请求并返回符合业务逻辑的响应，覆盖检查存在性、分片上传、合并校验全流程，支持断点续传、MD5校验与错误重试，前端代码无需修改即可调试验证。
前端用 Mock 模拟大文件切片上传，核心不是“真实传输文件”，而是模拟切片请求的发起、响应逻辑与服务端行为（如分片接收、合并校验等），让前端上传逻辑能完整走通、调试和验证。关键在于：拦截每个切片请求，返回符合业务预期的响应（如已存在、接收成功、需重传），同时支持断点续传、MD5校验等常见场景。
一、明确切片上传的典型交互流程
真实切片上传通常包含以下步骤，Mock 需覆盖每一步的响应：
- 前端计算文件 MD5（或 hash）并先请求 /api/upload/check 查询是否已存在完整文件
- 若不存在，则按固定大小（如 2MB）将文件切片，逐个 POST 到 /api/upload/chunk，携带参数：
fileId、chunkIndex、totalChunks、chunkHash（可选） - 每个切片成功后，服务端返回
{ code: 200, data: { uploaded: true } }或记录已接收的索引列表 - 全部切片上传完毕，前端调用 /api/upload/merge 合并切片，服务端返回最终文件 URL
二、用 Mock.js 拦截并模拟切片接口
在 src/mock/index.js 中配置（基于 MockJS v1.x，开发环境启用）：
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
import Mock from 'mockjs'
<p>// 模拟全局状态：记录各 fileId 的已上传 chunk 索引
const uploadedChunks = new Map()</p><p>// 1. 检查文件是否已存在（根据 mock fileId 或简单 MD5）
Mock.mock(/\/api\/upload\/check/, 'post', (options) => {
const { body } = options
try {
const data = JSON.parse(body)
const { fileId, fileHash } = data
// 简单策略：fileHash 为 'mock-exists' 时返回已存在
if (fileHash === 'mock-exists') {
return Mock.mock({
code: 200,
msg: '文件已存在',
data: { url: '<a href="https://www.php.cn/link/014da5b73b920833ca827999c0462030">https://www.php.cn/link/014da5b73b920833ca827999c0462030</a>' }
})
}
} catch (e) {}
return { code: 200, msg: '可上传', data: { canUpload: true } }
})</p><p>// 2. 接收单个切片
Mock.mock(/\/api\/upload\/chunk/, 'post', (options) => {
const { body } = options
try {
const data = JSON.parse(body)
const { fileId, chunkIndex, totalChunks } = data</p><pre class="brush:php;toolbar:false;">// 初始化该文件的已传切片集合
if (!uploadedChunks.has(fileId)) {
uploadedChunks.set(fileId, new Set())
}
const set = uploadedChunks.get(fileId)
// 模拟随机失败（例如第 3 片失败，用于测试重传）
if (chunkIndex === 3 && Math.random() > 0.8) {
return { code: 500, msg: '网络异常，切片上传失败', data: {} }
}
// 标记该切片已接收
set.add(chunkIndex)
return {
code: 200,
msg: '切片接收成功',
data: {
uploaded: true,
uploadedChunks: Array.from(set).sort((a, b) => a - b),
totalChunks
}
}} catch (e) { return { code: 400, msg: '参数解析失败', data: {} } } })
// 3. 合并切片 Mock.mock(/\/api\/upload\/merge/, 'post', (options) => { const { body } = options try { const data = JSON.parse(body) const { fileId } = data const set = uploadedChunks.get(fileId) || new Set()
if (set.size !== 5) { // 假设共 5 片，未传全则拒绝合并
return { code: 400, msg: '切片未上传完整', data: {} }
}
// 模拟合并耗时（可加 timeout）
const url = `https://mock.example.com/upload/${fileId}.zip`
return Mock.mock({
code: 200,
msg: '合并成功',
data: { url, fileId, size: '@natural(10000000, 50000000)' }
})} catch (e) { return { code: 400, msg: '合并参数错误', data: {} } } })
// 全局延时，模拟网络波动 Mock.setup({ timeout: '300-800' })
三、前端调用保持原样，无需改业务代码
你的上传组件（如使用 axios）仍按真实流程发请求，Mock 自动接管：
立即学习“前端免费学习笔记（深入）”；
// 示例：调用 check 接口
await axios.post('/api/upload/check', { fileId: 'abc123', fileHash: 'mock-exists' })
<p>// 示例：上传第 0 片
await axios.post('/api/upload/chunk', {
fileId: 'abc123',
chunkIndex: 0,
totalChunks: 5,
// 其他元数据...
})</p><p>// 示例：触发合并
await axios.post('/api/upload/merge', { fileId: 'abc123' })
控制台能看到请求被拦截，响应结构与真实后端一致，前端可正常处理 success/error、更新 UI 进度条、重试逻辑等。
四、增强实用性的小技巧
-
支持断点续传验证：Mock 中用
Map记录fileId → Set<chunkindex></chunkindex>，前端上传前先 GET 已传列表（可额外 mock/api/upload/progress接口） -
模拟不同响应码：对特定
chunkIndex返回 500 或 409（冲突），测试前端错误恢复能力 -
返回真实格式字段：如
size: '@natural(1000000, 100000000)'、hash: '@string(32)'，方便前端做一致性校验 -
避免污染生产环境：确保
main.js中仅开发环境引入 mock：
if (import.meta.env.DEV) import './mock/index'
