Mockjs替代方案 upload.addEventListener is not a function

pnpm add -D axios-mock-adapter@2.0.0
  1. 封装axios
// util/request.js
import axios from "axios";
const request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API, // /mock
    timeout: 5000,
})
export default request
  1. axios和mock-adapter建立联系
// mock/index.js
import request from "@/util/request.js";
import MockAdapter from "axios-mock-adapter";

const Mock = new MockAdapter(request);
export default Mock;
  1. axios发起请求
import request from "@/util/request.js";

export function reqLogin(data) {
    return request({
        url: '/login',
        method: 'post',
        data
    })
}

  1. mock模拟响应
// mock/login.js
import Mock from "@/mock/index.js";
Mock.onPost('/mock/login').reply(function (config) {
    console.log(config)
    // return an array in the form of [status, data, headers]
    return [200, {code: 200, data: 'token'}]
})
// main.js 引入mock文件
import '@/mock/login.js'
### 解决 `xhr.upload.addEventListener` 报错的方法 当遇到 `xhr.upload.addEventListener is not a function` 的错误时,这通常是因为某些库或工具修改了原生的 XMLHttpRequest 对象。具体来说,在使用 mock.js 进行数据模拟的过程中,mock.js 将 XhrRequest 对象替换为了 MockXhrRequest,从而导致 upload 属性丢失[^2]。 针对此问题的一个常见解决方案是在项目中的适当位置重新定义 MockXMLHttpRequest 的 upload 属性,使其指向原始的 xhr.upload 实现: ```javascript // 在引入 mock.js 后立即执行这段代码 if (typeof window.XMLHttpRequest === "function") { const originalOpen = XMLHttpRequest.prototype.open; Object.defineProperty(XMLHttpRequest.prototype, 'upload', { get() { return this._upload || {}; }, set(value) { this._upload = value; } }); XMLHttpRequest.prototype.open = function(...args) { originalOpen.apply(this, args); if (!this._originalSend) { this._originalSend = this.send; this.send = function(body) { if (!(this instanceof Mock)) { this.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); let _self = this; setTimeout(() => { try { // 如果有自定义处理逻辑可以在这里添加 } catch(e) {} _self.onreadystatechange(); }, 0); return this._originalSend.call(this, body); } return this._originalSend.call(this, body); }; } return originalOpen.apply(this, args); }; } ``` 另一种更简单的方式是直接给 MockXMLHttpRequest 添加缺少的属性: ```javascript MockXMLHttpRequest.prototype.upload = xhr.upload; ``` 这种方法适用于已经存在全局变量 `xhr` 和 `MockXMLHttpRequest` 的情况,并且确保了即使在使用 mock 数据的情况下也能保持正常的文件上传功能[^3]。 对于生产环境部署后的 Nginx 配置引发的问题,则需确认前端构建过程是否正确保留了必要的 polyfill 或者兼容性补丁;另外还需验证服务器端配置不会干扰到客户端发起请求的行为模式[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值