如何将纯JavaScript对象转换为File对象？

Question

我遇到需要将文件信息（一个File对象）存储在变量中的情况，但是我需要JSON.stringify对其进行JSON.stringify 。 这不适用于File对象：

> JSON.stringify(new File([], null))
« "{}"

因此，我需要做的是，获取用户上传的文件，将其转换为普通对象，以字符串格式存储，然后稍后可以提取该字符串JSON.parse ，然后将其转换回File 。 将其转换为简单的对象非常简单，但是将其重新返回到File对象是我一直无法找到实现方法。

补充说明：

假设我已经将File的属性复制到一个普通对象中：

{
  "lastModified": 1443077616000,
  "lastModifiedDate": "2015-09-24T06:53:36.000Z",
  "name": "Action Items.zip",
  "size": 3619135,
  "type": "application/zip"
}

我只需要将其转换回File对象。

Answer 1

基于此注释（ 如何将纯JavaScript对象转换为File对象？ ），您只需要一个字符串

使用FileReader API将文件转换为DataURL

var fileReader = new FileReader();

// onload needed since Google Chrome doesn't support addEventListener for FileReader
fileReader.onload = function(evt) {
    // Read out file contents as a Data URL
    var result = evt.target.result;

    // do whatever with RESULT
    // JSON or whatever

};

// Load blob (File inherits from BLOB) as Data URL
fileReader.readAsDataURL(blob);

使用此功能https://github.com/ebidel/filer.js/blob/master/src/filer.js#L131-L158将DataURL转换回文件。

/**
 * Creates and returns a blob from a data URL (either base64 encoded or not).
 *
 * @param {string} dataURL The data URL to convert.
 * @return {Blob} A blob representing the array buffer data.
 */
dataURLToBlob: function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);

        return new Blob([raw], {
            type: contentType
        });
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {
        type: contentType
    });
}

（由于File继承自Blob，因此您可以在任何地方用File替换Blob）

这里有一个示例，说明如何获取用户删除的文件，将其转换为base64字符串，保存（由于沙箱操作而没有localStorage），然后再取回字符串并将其转换回发送的文件由用户。 不是你想要的吗？

 var drop = document.getElementById('drop'), transform = document.getElementById('transform'); drop.addEventListener('dragover', function (e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }); var originalFile = null; drop.addEventListener('drop', function (e) { e.preventDefault(); e.stopPropagation(); originalFile = event.dataTransfer.files[0]; console.log('originalFile', originalFile); fileToURLData(originalFile); }, false); var storage = {}; function fileToURLData(file) { var fileReader = new FileReader(); // onload needed since Google Chrome doesn't support addEventListener for FileReader fileReader.onload = function(evt) { // Read out file contents as a Data URL var result = evt.target.result; /*localStorage.setItem('file-data', JSON.stringify({ dataURL: result, name: file.name, lastModified: file.lastModified, lastModifiedDate: file.lastModifiedDate, type: "image/jpeg" }));*/ storage = JSON.stringify({ dataURL: result, name: file.name, lastModified: file.lastModified, lastModifiedDate: file.lastModifiedDate, type: "image/jpeg" }) console.log('File dataURL',result); // do whatever with RESULT // JSON or whatever transform.className = 'show'; drop.className = 'hide'; }; // Load blob (File inherits from BLOB) as Data URL fileReader.readAsDataURL(file); } function dataURLToFile(dataURL, name, data) { var BASE64_MARKER = ';base64,'; if (dataURL.indexOf(BASE64_MARKER) == -1) { var parts = dataURL.split(','); var raw = decodeURIComponent(parts[1]); return new File([raw], name, data); } var parts = dataURL.split(BASE64_MARKER); var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new File([uInt8Array], name, data); } transform.addEventListener('click', function (e) { e.preventDefault(); e.stopPropagation(); var fileData= JSON.parse(storage); //localStorage.getItem('file-data')), dataURL = fileData['dataURL'], name = fileData.name; delete fileData.dataURL; delete fileData.name; console.log(dataURL, name, fileData); var file = dataURLToFile(dataURL, name, fileData); console.log('convertedFile', file); console.log('originalFile', originalFile); console.log('originalFile === convertedFile ? ', originalFile === file); console.log('different files, same values'); alert('DATAURL HAS BEEN CONVERTED BACK TO FILE - SEE CONSOLE'); }, false); 

 html, html { width: 100%; height: 100%; min-height: 500px; text-align: center; font-size: 50px; } #drop { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); color: #fff; } #drop.hide { display: none; } #transform { display: none; } #transform.show { display: block; } 

 <div id='drop'>DROP FILE HERE</div> <button id='transform'>Transform back to file</div>