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）