如何将输入File对象序列化为JSON

在Chrome、Firefox和Safari中，无法使用JSON.stringify将File对象直接转换为JSON。

您可以使用JSON.stringify 将File对象转换为字符串

例如：

// get File Object  
var fileObject = getFile();
// reCreate new Object and set File Data into it
var newObject  = {
   'lastModified'     : fileObject.lastModified,
   'lastModifiedDate' : fileObject.lastModifiedDate,
   'name'             : fileObject.name,
   'size'             : fileObject.size,
   'type'             : fileObject.type
};  
 
// then use JSON.stringify on new object
JSON.stringify(newObject);

您还可以将toJSON()行为添加到File对象中

例如：

// get File Object  
var fileObject = getFile();
// implement toJSON() behavior  
fileObject.toJSON = function() { return {
   'lastModified'     : myFile.lastModified,
   'lastModifiedDate' : myFile.lastModifiedDate,
   'name'             : myFile.name,
   'size'             : myFile.size,
   'type'             : myFile.type 
};}  
 
// then use JSON.stringify on File object
JSON.stringify(fileObject);

注意：使用POST HTTP方法向服务器发送File对象。

您必须使用FileReader API读取文件内容。File对象不包含文件内容(它只是指向文件的指针，允许您稍后读取(。

你可以看看这篇HTML5Rocks的文章来了解更多关于这个API的使用。

var file = getAFile( );
var success = function ( content ) {
  console.log( JSON.stringify( content ) ); }
var fileReader = new FileReader( );
fileReader.onload = function ( evt ) { success( evt.target.result ) };
fileReader.readAsText( file );

如果有人仍在寻找解决方案，请在另一篇文章和JSFiddle上的工作示例中查看我的答案。

JS:

function getFiles(){
    var files = document.getElementById("myFiles").files;
    var myArray = [];
    var file = {};
    console.log(files); // see the FileList
    // manually create a new file obj for each File in the FileList
    for(var i = 0; i < files.length; i++){
      file = {
          'lastMod'    : files[i].lastModified,
          'lastModDate': files[i].lastModifiedDate,
          'name'       : files[i].name,
          'size'       : files[i].size,
          'type'       : files[i].type,
      } 
      //add the file obj to your array
      myArray.push(file)
    }
    //stringify array
    console.log(JSON.stringify(myArray));
}

HTML:

<input id="myFiles" type="file" multiple onchange="getFiles()" />

您只需要一个自定义的替换程序：

function stringify(obj) {
    const replacer = [];
    for (const key in obj) {
        replacer.push(key);
    }
    return JSON.stringify(obj, replacer);
}
const json = stringify(file);
console.log(file);
console.log(json);

现在你应该看到：

File {name: "xyz.jpg", type: "image/jpeg", size...}
'{"name":"xyz.jpg","type":"image/jpeg","size"...}'

我没有循环，或者一个接一个地提取每个键，而是想出了这个函数，并使用了它作为图像输入。

const fileObject = e.target.files[0];

重要通知

//dont use shorthand for of loop
for (const [key, value] in Object.entries(x)) 
it can't loop through a file object in JS 

使用此代码

const imageObject = {};
for (const key in fileObject) {
    const value = fileObject[key];
    const notFunction = typeof value !== "function";
    notFunction && (imageObject[key] = value);
}
console.log(imageObject) // => should give you a normal JS object now

当您在内部传递json字符串Javascript时，将其转换为json对象，因此无需解析它。

如果是json文件->，请执行以下步骤

$('#inp_import_template')[0].files[0]

现在，您的json文件被转换为json对象(Javascript(。