如何在JavaScript中創建File對象的修改副本？

Question

從<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對象？

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()必須是

Answer 1

我的解決方案在File構造打下數組，而不僅僅是原始文件。

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");