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

Question

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

我的代码：

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

有什么方法可以将该 blob 转换为文件对象吗？

Answer 1

File

对象比

Blob

对象包含更多信息，具有

lastModifiedDate

和

fileName

等属性。您的图像数据具有这些属性中的任何一个都是没有意义的，因为它不是文件。

我假设您

FileList

处理程序使用

FileReader

来读取

File

对象。但是，

FileReader

方法也可以处理

Blob

对象（因为

File

是

Blob

的子类）。因此，您可以：

• 将您的

  FileReader

  代码提取到一个单独的函数中，该函数接受

  Blob

  或

  File

  （可能还有解析回调函数）amd 在处理每个

  FileList

  项目和处理您的

  Blob

  时调用该函数图像数据

• 如果您的

  FileList

  处理程序仅通过索引访问列表项（例如，

  myFileList[i]

  ），那么您可以简单地通过使用

  FileList

  数组来伪造

  Blob

  。例如，此函数适用于真实的

  FileList

  或

  Blob

  数组：

  function processFileList(list) {
      var reader = new FileReader();
      reader.readAsText(list[0]);
      reader.addEventListener("loadend", function() {
          console.log(reader.result);
      });
  }
  

Answer 2

        // const file = new File([blob], imageFile.name,{
        //     type:imageFile.type,
        //     lastModified: new Date().getTime()
        // }, 'utf-8');
        const newFiles = [File,File...]
        const dataTransfer = new DataTransfer();
        newFiles.forEach(file => {
            dataTransfer.items.add(file)
        });
        // dataTransfer.files => FileList 
        // add the FileList to <input> of typr file
        input.files = dataTransfer.files;