文件对象以正确的文件名而不是 src="blob..."答案

【问题标题】：File object to image with correct file name instead of src="blob..."文件对象以正确的文件名而不是 src="blob..."
【发布时间】：2016-10-10 03:43:52
【问题描述】：

我有一个 File 对象 myFile 在控制台中看起来像这样：

File {
  name: "myimage.jpg", 
  lastModified: 1465476925001, 
  lastModifiedDate: Thu Jun 09 2016 14:55:25 GMT+0200 (CEST), 
  size: 33002
  type: "image/jpeg"
}

但是当我用它创建图像时

var image = new Image();
image.src = URL.createObjectURL(myFile);

我明白了：

<img src="blob:http://myurl.com/6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5">

当我尝试通过右键单击保存文件时，文件名为空或“6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5”而不是“myimage.jpg”。文件对象中的文件名消失了。有没有办法设置图片文件名？

【问题讨论】：

@K3N 你可以看到工作示例here。来源是here - 顺便说一句，我使用了很多你的代码，但没有机会联系你。很想看到你为这个项目做出贡献！ :)
很高兴听到@Mick，总是很高兴收到人们的回音，谢谢 :) 我不确定我能做出多少贡献，因为我缺乏打字技能，但我很乐意“咨询”如果需要的话。我无法重现问题顺便说一句（FF48/CH53/IE11），可能是浏览器错误。您在哪个浏览器/版本中收到此错误？
TypeScript 几乎是 JavaScript，具有所有编程语言都知道的数据类型和面向对象的东西。我在不到一天的时间内就学会了一切。我的项目很简单，只有一个文件和 95% 的 JavaScript。问题是图像没有文件名。您可以查看示例的内联 JavaScript，其中我从文件对象或 blob 创建图像（如果文件 api 不可用，即 Safari 和 IE）。您可能会在控制台中看到 File 对象包含文件名，但图像没有文件名。
我编辑了这个问题。它不是关于“blob://null”，我可能只在我的本地机器上得到。它是关于文件对象的文件名，当我从中创建图像时它就消失了，如上所示。

标签： javascript image image-processing filereader fileapi

【解决方案1】：

问题

File 对象是Blob 的扩展版本，允许它保存文件名、大小等元数据。

然而，虽然createObjectURL() 将引用File 和Blob，但通过blob: 协议读取的数据将仅包含二进制文件数据 本身，就像通过其他协议加载时一样.不会通过协议提供元数据（例如文件名）。

其他不考虑文件名的示例可能是通过 PHP 或 ASPX 页面 (/getimage.aspx?id=1) 加载图像时。此外，这里没有提供元数据，在这种情况下，浏览器会建议像“getimage.aspx%3Fid=1”这样的文件名。正如预期的那样。

IMG 标签本身从不假定任何文件名，即使在源点使用了一个文件名；它只保留通过src 属性/属性原样提供给它的内容，作为检索所需二进制数据进行解码的连接点。

在这种情况下，源点是 blob:*/*，这将是 IMG 标记通过 src 引用的内容，并且是浏览器在保存数据时使用的内容。

解决方法

保留来自File 对象的文件名的唯一方法是跟踪它，以便在需要下载时访问它。

但这也是有限的，因为您只能在A 标记中使用download 属性指定文件名。当然也有一些浏览器比如

<a href="blob:.." download="filename.jpg"><img ..></a>

在 IE10+ 中有 proprietary method msSaveBlob() 可以代替使用：

window.navigator.msSaveBlob(myBlob, 'filename.jpg');

除此之外，没有通用的方法可以在客户端中指定默认文件名。

Example fiddle

【讨论】：

还有一种方法：将 blob 发送给 service worker 并用那个 blob + content-disposition header 响应
@Endless 很好。它（再次）不包括 IE（和 Safari），但如果 IE 不是必需的或者 msSaveBlob 对 IE 来说足够了，这是一个不错的选择。
这基本上就是我为 :) 构建的库，名为 StreamSaver.js