Vue3 mock影响Element-Plus库中upload上传组件

在使用 Element Plus 的 el-upload 组件时，如果你启用了 mock.js 拦截请求（如使用 mockXHR() 进行接口模拟），确实可能会对上传功能产生影响，表现为上传失败、无响应、进度条卡住等问题。

这是因为 mock.js 拦截了 XMLHttpRequest，而 el-upload 内部就是基于 XMLHttpRequest 来实现上传逻辑的。如果 mock.js 没有正确处理 xhr.upload 或响应内容，可能会出现各种问题。

✅ 保留现有 mockXHR() 机制用于普通接口的 mock；
✅ 上传模块不受 mock 干扰，使用真实的 XMLHttpRequest；
✅ 不破坏现有业务逻辑和接口调用。

✅ 最佳实践：上传模块临时恢复原生 XMLHttpRequest
💡 思路：
在初始化 mock 时保存原始 XMLHttpRequest，在上传页面或模块中恢复它。

✅ 步骤一：在 mockXHR() 中保存原始 XMLHttpRequest

// mock/index.ts 或 mockXHR.ts 中
export const originalXHR = window.XMLHttpRequest // 保存原生 xhr

export function mockXHR() {
	window.XMLHttpRequest = Mock.XHR // 劫持 xhr

	// 你现有的注册逻辑不变
		...
}

✅ 步骤二：在上传页面中临时还原原始 XMLHttpRequest
假设你的上传组件在某个模块中：

// upload-page.vue / upload-page.ts

import { originalXHR } from '@/mock' // 引入原始 xhr

// 页面挂载前还原
onBeforeMount(() => {
  window.XMLHttpRequest = originalXHR
})

// 页面销毁时还原为 mock（可选）
onUnmounted(() => {
  // 如果你希望回到 mock 状态，可恢复：
  // window.XMLHttpRequest = Mock.XHR
})