在 javascript 中将 Blob 转换为文件列表答案

【问题标题】：Convert Blob to File List in javascript在 javascript 中将 Blob 转换为文件列表
【发布时间】：2014-07-18 13:59:20
【问题描述】：

我正在使用以下代码将画布图像转换为 blob。
为了将 blob 转换为文件/文件列表对象，我需要将该文件列表传递给文件处理程序。

我的代码：

var canvas1 = document.getElementById("preview");
var theImage = document.getElementById("blahProfile");
theImage.src = canvas1.toDataURL();
var blob = dataURItoBlob(theImage.src);

有没有办法将该 blob 转换为文件对象？

【问题讨论】：

标签： javascript blob filelist

【解决方案1】：

File 对象比Blob 对象包含更多信息，具有lastModifiedDate 和fileName 等属性。您的图像数据具有这些属性中的任何一个都没有意义，因为它不是文件。

我假设您 FileList 处理程序用户使用 FileReader 来读取 File 对象。但是，FileReader 方法也可以处理Blob 对象（因为File 是Blob 的子类）。因此，您可以：

将您的 FileReader 代码提取到一个单独的函数中，该函数接受 Blob 或 File（可能还有一个解析回调函数）并在处理每个 FileList 项目时调用该函数您的Blob 图像数据
如果您的 FileList 处理程序仅按索引访问列表项（例如，myFileList[i]），那么您可以通过使用 Blobs 的数组来伪造 FileList。例如，此函数适用于真实的FileList 或Blobs 的数组：
```
function processFileList(list) {
    var reader = new FileReader();
    reader.readAsText(list[0]);
    reader.addEventListener("loadend", function() {
        console.log(reader.result);
    });
}
```

【讨论】：

我可以将这两个文件属性添加到 blob 中吗？
@madanV 当然，JavaScript 允许您向任何内容添加新属性，因此您可以编造一个假文件名并将其作为fileNameproperty 添加到Blob。然后它将具有您制作并附加到它的任何fileName。 “自然”File 对象将有一个 fileName 反映所选文件的名称（但在您的情况下，Blob 只是数据并且没有文件名，因为它不是来自用户的文件系统） .
如何将 name 属性添加到 blob 对象。