前端浏览器js的file对象读取属性时，报错 Illegal invocation

当你在前端使用 JavaScript 的 File 对象时遇到 Illegal invocation 错误，通常是因为你尝试以不正确的方式调用了某些方法或访问了某些属性。这个错误提示表明调用的方法需要特定的上下文（即this指向），而你在调用它的时候没有提供正确的上下文。

例如，如果你直接从 File 对象中取出某个方法然后调用，而不保留该方法原本的对象上下文，就可能会遇到这个问题。这是因为一些方法依赖于它们被定义所在的对象的状态（即它们内部的this指向）。

解决方案

确保你在正确的上下文中调用方法。比如，不要将 File 对象的方法单独提取出来作为回调函数或其他地方使用，除非你通过 .bind() 方法或者其他方式固定了其上下文。

这里有一个简单的例子来说明如何避免 Illegal invocation 错误：

错误示例

const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const readMethod = file.slice; // 直接获取slice方法

// 这里会报错，因为readMethod失去了原本的this指向
const chunk = readMethod(0, 10);

正确示例

保持方法在其原始对象的上下文中调用，或者使用 .bind() 方法来绑定正确的上下文。

const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

// 直接调用，保持原有的this指向
const chunk = file.slice(0, 10);

// 或者使用.bind()来确保正确的this指向
const readMethod = file.slice.bind(file);
const chunkBound = readMethod(0, 10);

在这个正确的示例中，我们展示了两种避免 Illegal invocation 错误的方法：直接调用保持原有上下文，或者使用 .bind() 来手动指定方法调用时的 this 值。

此外，请确保你正在使用的属性和方法确实是 File 接口提供的。如果问题仍然存在，请检查你的代码逻辑，确认是否在尝试访问 File 对象上不存在的属性或方法。

avoiding-illegal-invocation

避免非法调用

// doesn't work in the console

function forEach(array, action) {
for (var i = 0; i < array.length; i++)
action(array[i]);
}

forEach([1, 2, 3], console.log);

// works (in the browser, not node)

function forEach(array, action) {
for (var i = 0; i < array.length; i++)
action(array[i]);
}

forEach.call(console, [1, 2, 3], log);