在JavaScript中重命名一个File()对象

Question

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

在Javascript中，我有一个File对象，它已经设置了一个name属性，但我希望可以更新这个属性。目前，明显的做法 myFile.name = "new-name.txt" 返回一个错误，指出该属性是只读的。

如何更改JavaScript File对象上的name属性是最好的方法？

- FiniteLooper

Answer 1

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

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

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

- PaulMest

---

干净，但IE＆Edge加上Opera for Android不支持File()构造函数。 - Meettya

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

@AkshayKhot，你能找到答案吗？我也想知道它是否在内存中重复。 - Chris Lang

对我来说，它似乎没有增加内存使用量。 - Chris Lang

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

Answer 2

试试这个：

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

注意: 这是用于图片类型的，您需要将此类型更改为您实际使用的类型。

- Alexander Taborda

---

如果您已经在使用File对象，我会建议使用以下代码： var blob = file.slice(0, file.size, file.type)。 - carestad

Answer 3

您可以添加一个带有名称的 input 标签，并将 name 属性隐藏起来，不让用户看到。在服务器端，只需使用该 input 作为名称并忽略默认名称即可。

- beautifulcoder

---

我已经有一个客户端的<input />，供用户输入名称。目前来看，这可能是唯一可行的选择:( 但我仍在寻找其他选项... - FiniteLooper

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

这并没有回答问题。您没有说明如何重命名文件对象或如何创建具有不同名称的对象副本。您基本上建议OP创建一个变通方法... - Michal

Answer 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

- Andrew Chart

Answer 5

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

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

- Kris White

---

很遗憾，这不起作用，因为f.name是只读的。:( - dmboucher

Answer 6

你可以使用以下代码： FileSystemEntry.moveTo(newParent[, newName][, successCallback][, errorCallback]); 来重命名文件或目录。

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

- 裴雨墨

---

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