JavaScript-объект для файлового объекта

Question

Я работаю над добавлением изображений на страницу, делаю что-то с коллекцией добавленных изображений (предварительный просмотр и т. Д.) И, наконец, я хочу, чтобы они были сохранены. Все круто, пока объект files не будет использован для показа или сохранения фотографии.

var input = document.getElementById('files');
var files = input.files;

, так как это массив объектов только для чтения - им нельзя свободно манипулировать. Для работы с этим дружественным массивом я отобразил его так:

var addedFiles = added(files); 
function added(from) {
    return $.map(from, function (i) {
         var x = { lastModified: i.lastModified, lastModifiedDate: i.lastModifiedDate, name: i.name, size: i.size, type: i.type, webkitRelativePath: i.webkitRelativePath }
         return x;
    });
}

... затем сделайте что-нибудь с этими файлами - и я хочу просмотреть, а затем сохранить - но, например, во время предварительного просмотра я получаю сообщение об ошибке:

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

    function readImage(file) {
        var reader = new FileReader();
        reader.addEventListener("load", function () {
            var image = new Image();

            image.addEventListener("load", function () {
                preview.innerHTML += drawHtml(this, file);
                window.URL.revokeObjectURL(image.src); //blob version
            }); 
            image.src = reader.result; //file version
            image.src = window.URL.createObjectURL(file) //blob version
        });
        reader.readAsDataURL(file); // here fire the error
    }

Когда я проходил тестирование изначально file в соответствии с приведенным выше кодом, все работает.

Вопрос: Как создать пользовательский объект obj (в моем случае массив obj), который можно разобрать в file obj

P.S. В проекте я использую jquery и javascript

Answer 1

правильный ответ - блоб - это что-то удивительное для меня.

//from is the array of obj - files
  function added(from) {
                    var out = [];
                    for (var i = 0; i < from.length; i++) {
                        (function (obj) {
                            var readerBase64 = new FileReader();
                            var obj = from[i];
                            readerBase64.addEventListener("load", function () {
                                var fileBase64 = readerBase64.result;
                                var row = { name: obj.name, size: obj.size, type: obj.type, base64: fileBase64 }
                                out.push(row);
                            });
                            readerBase64.readAsDataURL(obj); 
                        })(from[i]);
                    }
                    return out;
                }

'out' - это таблица моих собственных объектов с base64, поэтому я могу создавать изображения для предварительного просмотра и «выполнять какие-то функции», в конце я собираюсь использовать base64 для создания файлов.

здесь ссылка на вопрос, связанный с моим следующим шагом - создание img из blob (где я использую дополнительный lib b64toBlob)

Answer 2

Вместо того, чтобы сопоставлять объекты File с новыми несовместимыми объектами, вы можете вместо этого обернуть их дополнительными необходимыми объектами, но затем использовать исходные исходные файлы при чтении они:

const fileSelections = Array.prototype.map.call(input.files, file => ({
  // This will let you get to the underlying file in the wrapper objects
  file,

  // If you want pass-throughs, you can do stuff like this:
  get lastModified() { return file.lastModified },

  // And you can add your own properties/methods as you please
});

function readImage(fileSelection) {
  // Unwrap the file
  const file = fileSelection.file;

  const reader = new FileReader();
  reader.addEventListener("load", function () {
    const image = new Image();

    image.addEventListener("load", function () {
      preview.innerHTML += drawHtml(this, file);
      window.URL.revokeObjectURL(image.src); //blob version
    }); 
    image.src = reader.result; //file version
    image.src = window.URL.createObjectURL(file) //blob version
  });
  reader.readAsDataURL(file);
}