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

Posted 2023-05-08

【中文标题】在 javascript 中将 Blob 转换为文件列表

【英文标题】：Convert Blob to File List in javascript

【发布时间】：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 转换为文件对象？

【参考方案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 对象。