Конвертировать BLOB в список файлов в JavaScript

Question

Я использую следующий код для преобразования изображения холста в blob.
Чтобы преобразовать большой двоичный объект в объект file/filelist, мне нужно передать этот список файлов обработчику файлов.

Mycode:

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 (и, возможно, функция обратного вызова разрешения) и вызовите эту функцию при обработке каждого из ваших FileList предметы и при обработке вашего Blob данных изображения

• если твой FileList обработчик получает доступ только к элементам списка по индексу (например, myFileList[i]) тогда вы могли бы подделать FileList просто с помощью массива Blobs. Например, эта функция работает с реальным FileList или массив Blobs:

  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;