前端开发中 JS 怎么用 Mock 模拟文件上传接口-js教程-PHP中文网

mock 不直接处理文件上传二进制流，但可通过模拟接口行为覆盖调试场景，如返回 fileid、进度、错误码、中止或超时；常用 mock.js 或 vite-plugin-mock 实现，需注意其不校验文件服务端逻辑、网络层行为及真实进度事件。

前端开发中 js 怎么用 mock 模拟文件上传接口

Mock 本身不直接处理文件上传的二进制流，但前端开发中完全可以通过模拟「文件上传接口的行为」来覆盖绝大多数调试场景——比如上传成功返回 fileId、进度提示、错误码、甚至模拟上传中止或超时。关键不是“传真文件”，而是让调用方（如 `` + `FormData` + `fetch`）拿到符合预期的响应。

用 Mock.js 拦截并模拟上传请求

这是最常用、零服务依赖的方式，适合 Vue/React 项目本地调试：

安装：npm install mockjs --save-dev
在 src/mock/upload.js 中写规则：

import Mock from 'mockjs'
Mock.mock('/api/upload', 'post', function (options) {
  // 可选：解析 FormData（Mock.js 不自动解析，需手动提取）
  const body = options.body || '';
  // 模拟简单判断：是否有文件名
  const hasFile = body.includes('filename=') || body.includes('Content-Disposition');
  if (!hasFile) {
    return { code: 400, message: '缺少文件字段' };
  }
  // 模拟成功响应（含常见字段）
  return Mock.mock({
    code: 200,
    message: '上传成功',
    data: {
      fileId: '@guid',
      fileName: '@ctitle(5,12)',
      url: 'https://example.com/uploads/@guid.png',
      size: '@natural(10240, 5242880)', // 10KB ~ 5MB
      mimeType: '@pick(["image/jpeg", "image/png", "application/pdf"])'
    }
  });
});

在入口文件（如 main.js 或 mock/index.js）中引入：import './mock/upload'
前端代码照常使用 FormData 发起请求，无需修改：

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('desc', '测试上传');
fetch('/api/upload', { method: 'POST', body: formData })
.then(res => res.json())
.then(data => console.log('上传结果:', data));

用 vite-plugin-mock 模拟更真实的上传流程

适用于 Vite 项目，能更好兼容请求头、状态码、延迟等细节，且不侵入业务代码：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

在 src/mock/upload.ts 中定义：

export default [
  {
    url: '/api/upload',
    method: 'post',
    response: ({ body }) => {
      const formData = new URLSearchParams(body);
      if (!formData.has('file')) {
        return { code: 400, message: '参数缺失' };
      }
      return {
        code: 200,
        data: { fileId: Math.random().toString(36).substr(2, 9), url: `https://mock.example/${Date.now()}.jpg` }
      };
    },
  },
];

插件会自动拦截 POST /api/upload，返回你写的对象，前端不用改任何 fetch 逻辑

需要模拟上传进度或失败？加点“行为”就行

真实上传有过程，Mock 也能体现：

模拟延迟响应（比如上传耗时）：Mock.setup({ timeout: '800-2000' }) 放在 mock 入口处
模拟 50% 概率失败：if (Math.random() > 0.5) return { code: 500, message: '上传服务繁忙' }
模拟分片上传接口（如 /api/upload/chunk 和 /api/upload/merge）：分别写两个 Mock 规则，按 URL 区分即可