从<input type="file">
收到的文件属性是只读的。
例如,以下重写file.name
的尝试将无提示失败或抛出TypeError: Cannot assign to read only property 'name' of object '#<File>'
。
<input onchange="onchange" type="file">
onchange = (event) => {
const file = event.target.files[0];
file.name = 'foo';
}
尝试通过Object.assign({}, file)
创建副本失败(创建一个空对象)。
那么如何克隆一个File
对象呢?
答案 0 :(得分:13)
我的解决方案位于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()
的第一个参数必须是数组,而不仅仅是原始文件。
答案 1 :(得分:3)
您可以使用secondform.Show();
,它还会将FormData.prototype.append()
转换为Blob
个对象。
File
答案 2 :(得分:0)
The accepted answer在现代浏览器中也对我有用,但是很遗憾,由于IE11 does not support the File
constructor,它在IE11中不起作用。
但是,IE11确实支持Blob
构造函数,因此可以用作替代方法。
例如:
var newFile = new Blob([originalFile], {type: originalFile.type});
newFile.name = 'copy-of-'+originalFile.name;
newFile.lastModifiedDate = originalFile.lastModifiedDate;
来源:MSDN - How to create a file instannce using HTML 5 file API?