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

Question

我在使用时获取文件对象的值<inpu type="file" />，但在访问时e.target.files[0]我无法将其与扩展运算符或 一起使用Object.assign。

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

这是一个用于重现它的codesandbox。

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 库和方法 allocateIn()，该方法适用于自己的和继承的对象属性。