在 IE11 中规范化文件名并在 Javascript 中创建新文件

Posted 2023-03-22

【中文标题】在 IE11 中规范化文件名并在 Javascript 中创建新文件

【英文标题】：Normalising the fileName in IE11 and creating of a new file in Javscript

【发布时间】：2020-06-21 14:03:24

【问题描述】：

我正在尝试上传文件，但我想规范化它的名称，它适用于其他浏览器，但在 IE11 中，我搜索发现不支持此方法（规范化），所以我m 使用 polyfill unorm。所以规范化现在工作正常，但我们不能直接更改文件名，我们需要创建一个新文件。但是我们不能使用新文件，因为它也不支持。所以我使用了新的 Blob，但问题是我没有在服务器端获取文件名，它总是 blob。

其他浏览器的代码：

var fileName = file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, "");
var newFile = new File([file], fileName,  type: file.type );
newFile.label = 'FICHIER';

IE11的代码

fileName = unorm.nfd(file.name);
newFile = new Blob([file],  type: file.type );
newFile.label = 'Fichier';
newFile.name= fileName;

为了生成对服务器的请求，我使用 formdata ：

fd = new FormData();
fd.append("id", param);
fd.append(file.label || "uploadedFile", file, file[paramName]);

你能告诉我我应该怎么做才能得到文件名，或者是否有其他方法可以做到这一点。

【问题讨论】：

您在这里遗漏了一个重要部分：您如何生成对服务器的请求？您是否有机会使用 FormData？在这种情况下，您只需要使用formData.append(field, blob, filename) 的第三个参数即可。

是的，我正在使用 formdata，我已经这样做了，但它没有工作，现有的代码是，我将您的建议添加到此代码中，但它没有工作。 fd = new FormData(); fd.append("id", 参数); fd.append(file.label || "uploadedFile", file, file[paramName]);

请将此部分作为edit 包含在您的问题中。

@Kaiido 我现在用 file.name 替换了 file[paramName]，我得到了文件名，但它没有标准化。也许 unorm 不是我应该使用的？我的文件名中有特殊的法语字符 éà。

这就是我得到的“aaacape... PNG”，我想我需要像替换使用 normalize 之类的东西

【参考方案1】：

Blob object 不包含 name 属性，因此，我们无法通过 Blob 对象更改名称。

获取文件数据后，建议你可以附加一个新的参数来记录新的文件名，然后在提交表单或保存上传的文件时，你可以将文件数据和新的文件名发送到服务器.

另外，这里还有一个关于使用FormData上传文件的帖子，请参考：

Angular File Upload

File Upload using AngularJS