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

Question

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

我的代码：

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

有没有办法将该二进制大对象(blob)转换为文件对象(file object)?

- madan V

Answer 1

File对象包含比Blob对象更多的信息，例如lastModifiedDate和fileName等属性。因为它不是文件，所以你的图像数据不应该具有这些属性。

我假设您的FileList处理程序使用FileReader来读取File对象。然而，FileReader方法也可以处理Blob对象（因为File是Blob的子类）。因此，您可以选择以下两种方式：

• extract your FileReader code into a separate function that accepts a Blob or File (and possibly a resolution callback function) amd call that function when handling each of your FileList items and when processing your Blob of image data

• if your FileList handler only accesses list items by index (e.g., myFileList[i]) then you could fake a FileList simply by using an array of Blobs. For example, this function works with either a real FileList or array of Blobs:

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

- apsillers

---

我能将这两个文件属性添加到 Blob 中吗？ - madan V

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

如何向 Blob 对象添加名称属性。 - madan V

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;

- Anas Alpure