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

Question

我在使用<inpu type="file" />时获得了文件对象的值，但是在访问e.target.files[0]我不能将它与扩展运算符或Object.assign 。

我想用文件的所有属性保存状态并向其中添加更多数据，但它不起作用，它给了我一个空对象。

这是一个用于重现它的代码沙盒。

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`
}

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

Answer 1

来自 MDN 文档：

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

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

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