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到上面的代碼時，一切都正常。

問題：如何創建可解析為file obj的自定義obj（在我的情況下為obj數組）

PS在項目中，我正在使用jQuery和JavaScript

Answer 1

與其將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);
}

Answer 2

正確答案是一滴-對我來說真是太神奇了。

//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”創建文件。

與我的下一步相關的問題的此處鏈接-從blob創建img（我在其中使用其他lib b64toBlob）