如何在JavaScript中创建一个修改后的文件对象副本？

Question

从接收到的文件属性是只读的。

例如，尝试重新编写file.name将静默失败或抛出TypeError：无法分配给对象'#<File>'的只读属性'name'。

<input onchange="onchange" type="file">

onchange = (event) => {
    const file = event.target.files[0];
    file.name = 'foo';
}

尝试通过Object.assign({}, file)创建副本会失败（创建一个空对象）。

那么如何克隆File对象呢？

- 2540625

Answer 1

我的解决方案在 File 构造函数中：

https://developer.mozilla.org/en-US/docs/Web/API/File#Implementation_notes

它本身是 Blob 的扩展：

https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob

let file = event.target.files[0];
if (this.props.distro) {
    const name = 'new-name-here' + // Concat with file extension.
        file.name.substring(file.name.lastIndexOf('.'));
    // Instantiate copy of file, giving it new name.
    file = new File([file], name, { type: file.type });
}

请注意File()的第一个参数必须是一个数组，而不仅仅是原始文件。

- 2540625

Answer 2

您可以使用FormData.prototype.append()，它可以将Blob转换为File对象。

let file = event.target.files[0];
let data = new FormData();
data.append("file", file, file.name);
let _file = data.get("file");

- guest271314

Answer 3

更跨浏览器的解决方案

被接受的答案 在现代浏览器中对我同样有效，但不幸的是在IE11中无法工作，因为IE11不支持File构造函数。 不过，IE11支持Blob构造函数，因此可以用作替代。

例如：

var newFile  = new Blob([originalFile], {type: originalFile.type});
newFile.name = 'copy-of-'+originalFile.name;
newFile.lastModifiedDate = originalFile.lastModifiedDate;

来源: MSDN - 如何使用 HTML 5 文件 API 创建文件实例？

- Boaz