如何在JavaScript中获取文件对象的所有属性？

Question

我正在使用时，想要获取File对象的值，但是当访问e.target.files[0]时，我不能将它与spread operator或Object.assign一起使用。我想保存包括所有File属性和其他一些数据在内的状态，但它不起作用，会返回一个空对象。请参考这里的示例代码。

const onChange = e => {
    const file = e.target.files[0];
    console.log(file); // Logs File Object
    console.log({ ...file }); // Logs empty Object
    console.log(Object.assign({}, file)); // Logs empty Object
    setFile({ ...file, extraData: "hey" }); // Sets Object only with `extraData`
}

为什么它不传播文件属性？

- Vencovsky

---

@HereticMonkey 这个问题也是为了更好地理解文件对象的行为，而不仅仅是为了使代码更清晰。你知道为什么它不会扩展属性吗？我不知道，我想知道为什么。 - Vencovsky

Answer 1

来自MDN文档：

Object.assign() 方法将一个或多个源对象的所有可枚举自有属性复制到目标对象中。它返回目标对象。

我猜你指的是File对象的继承属性。如果是这种情况，Object.assign()方法不会考虑它们。展开运算符也一样。

解决方案是使用lodash库和assignIn()方法，它适用于自有和继承的对象属性。

- Dimitris Papazacharias

---

另一个例子是JSON.stringify() - 它只考虑可枚举的属性。因此，JSON.stringify(file)或JSON.stringify(error)只返回{}。 - gvlax