在 JavaScript 中重命名 File() 对象

Posted 2023-03-11

【中文标题】在 JavaScript 中重命名 File() 对象

【英文标题】：Renaming a File() object in JavaScript

【发布时间】：2015-08-24 09:08:38

【问题描述】：

我希望我的用户能够在上传之前重命名文件。

我在 javascript 中有一个 File 对象，该对象具有已设置的 name 属性，但我希望能够对其进行更新。现在做明显的myFile.name = "new-name.txt"会返回一个错误，这个属性是只读的。

在 JavaScript File 对象上更改 name 属性的最佳方法是什么？

【参考方案1】：

现在file.name 是一个只读属性，我发现这是在浏览器中重命名文件对象的最佳方法：

const myNewFile = new File([myFile], 'new_name.png', type: myFile.type);

【讨论】：

干净，但File() constructor 不支持 IE 和 Edge plus Opera for android。

谢谢。它会复制内存吗？还是只使用指向原始文件引用的现有 blob 的指针？

@AkshayKhot 你能找到这个吗？我也想知道它是否在内存中重复

它看起来并没有增加我的内存使用量。

@ChrisLang，是的，我认为新文件只是指向现有的 blob，而不是复制它。

【参考方案2】：

试试这个：

var blob = file.slice(0, file.size, 'image/png'); 
var newFile = new File([blob], 'name.png', type: 'image/png');

注意： 这是一个图像类型，你必须用你实际使用的类型来改变这个类型。

【讨论】：

我想说，如果您仍然使用 File 对象，请使用：var blob = file.slice(0, file.size, file.type)

【参考方案3】：

您可以添加带有名称的input 标记，并对用户隐藏name 属性。在服务器上，只需使用input 作为名称，忽略默认名称即可。

【讨论】：

我已经有一个客户端<input /> 供用户输入名称。目前，据我所知，这实际上可能是唯一可行的选择:(仍在寻找...

是的，File 对象是不可变的。这样做似乎是最好的方法，我可以拼凑一个 hack 来提取文件数据，将其转换为带有新名称的 Blob，然后将其转换为 File，但走这条路要容易得多。

这并不能真正回答问题。您没有说如何重命名文件对象或如何创建具有不同名称的对象的副本。你基本上说OP应该创建解决方法......

【参考方案4】：

响应 Alexander Taborda 的回答... Blob.slice() 的第一个和第二个参数是应该形成新 blob 的原始 blob 的开始和结束字节。说：

var blob = file.slice(0,-1);

您不是说“复制到文件末尾”（我认为这是您的目标），而是说“复制除最后一个字节之外的整个 blob”。

正如@carestad 所说

var blob = file.slice(0, file.size);

创建一个新的 File() 对象后应该创建一个具有新名称的精确副本。

请注意，使用 png 时，如果没有最后一个字节，文件将被视为无效。

发件人：https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice

【参考方案5】：

你可以使用

FileSystemEntry.moveTo(newParent[, newName][, successCallback][, errorCallback]);

重命名文件或目录。

来自 MDN： https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/moveTo

【讨论】：

这在 MDN 中被标记为实验性和弃用。也许这就是为什么这个答案在几年内没有得到任何投票。由于 JavaScript 是不安全的，它不应该直接访问客户端文件系统，尽管有很多漏洞，不幸的是。

【参考方案6】：

假设 f 是原始文件对象，只需使用扩展运算符，正则表达式名称示例：

let newF = 
        ...f,
        name: f.name.toString().replace(/[^0-9A-Za-z.\-_()]/gi, '')
      ;