浏览器控制台报错 Illegal invocation 通常是因为 JavaScript 函数执行时 this 指向丢失，或者 jQuery Ajax 上传 FormData 时配置冲突。排查时优先检查 jQuery 的 processData 和 contentType 设置，以及原生方法调用是否保留了上下文。

快速处理思路

若使用 jQuery 发送 FormData 请求，直接在 Ajax 配置中禁用自动处理。

$.ajax({
    url: '/upload',
    data: formData,
    processData: false,
    contentType: false
});

为什么会这样

JavaScript 函数执行依赖正确的上下文绑定，当方法脱离原始宿主对象时触发非法调用。

jQuery 默认会将数据序列化为 application/x-www-form-urlencoded 格式，而 FormData 对象属于 multipart/form-data 且不需要序列化。若 jQuery 强行处理 FormData 对象，会导致内部调用链中方法脱离原始宿主对象，从而抛出 Illegal invocation 错误。

分步处理

第一步：定位错误来源。打开浏览器开发者工具控制台，查看错误堆栈信息，确认报错发生在 jQuery 内部还是自定义文件对象方法调用处。

第二步：调整 Ajax 配置。如果是 jQuery Ajax 上传文件，在配置项中显式声明 processData:false 和 contentType:false，阻止 jQuery 自动序列化数据和设置请求头。

第三步：检查方法绑定。如果是原生 JavaScript 操作 File 对象，避免直接将对象方法提取为回调函数，使用 bind 方法固定 this 指向或直接通过对象调用。

怎么验证是否生效

刷新页面重新触发操作，观察浏览器控制台不再出现 Uncaught TypeError: Illegal invocation 报错。在网络面板检查请求，确认 Content-Type 为 multipart/form-data 且请求成功返回状态码 200。

常见坑

jQuery 会自动设置请求头 Content-Type，这与 HTML5 FormData 上传机制冲突，必须手动取消该设置。直接提取 File 对象的 slice 等方法而不绑定上下文，会导致方法调用时 this 指向 window 而非 File 实例。

常见问题

原生 JS 发送 FormData 需要设置请求头吗？

不需要。使用原生 JavaScript 发送 FormData 数据格式时，不可以手动设置请求头，浏览器会自动处理 multipart/form-data。

jQuery Ajax 上传文件必须设置哪些参数？

必须设置 processData:false 和 contentType:false，否则 jQuery 会尝试序列化文件对象导致报错。

参考来源

• CSDN 问 - jQuery 插件冲突导致 Illegal invocation_编程语言-CSDN 问
• 博客园 - 前端浏览器 js 的 file 对象读取属性时，报错 Illegal invocation - 龙陌 - 博客园
• 技术文章 - 解决 Ajax 方式上传文件报错"Uncaught TypeError: Illegal invocation"例子解析
• 技术文章 - JQuery Ajax 上传附件 Illegal invocation 错误
• 技术文章 - 关于 illegal invocation 报错的解决方法