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

Question

我想将 HTML 输入文件转换为 JSON 字符串，如下所示：

var jsonString = JSON.stringify(file);
console.log( file );
console.log( jsonString );

现在，在我的 Firebug 中，它记录为：

File { size=360195, type="image/jpeg", name="xyz.jpg", mehr...} 
Object {}

为什么

jsonString

是空的？

背景信息：我想使用 JSONP 将文件引用发送到另一个 PHP 服务器。

其他信息：我只想将文件指针（引用）转换为字符串，以通过 GET 发送它。

Answer 1

在 Chrome、Firefox 和 Safari 中无法使用 JSON.stringify 直接将

File

对象转换为 JSON。

您可以使用

File

 将 

JSON.stringify

对象转换为字符串

例如：

// 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);

注意：使用

File

HTTP 方法将

POST

对象发送到服务器。

Answer 2

您必须使用 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 );

Answer 3

如果有人仍在寻找解决方案，请参阅另一篇文章中的我的答案和 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()" />

Answer 4

您只需要一个自定义替换器：

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"...}'

Answer 5

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

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

Answer 6

您可以将文件转换为base64字符串，然后将其序列化为json。被这个问题困扰并采取了以下方法：

转换为字符串的函数：

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result.split(",")[1]); // Extracting the Base64 string from the data URL
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

Answer 7

当你传递一个 json 字符串时，Javascript 在内部将其转换为 Json 对象，因此不需要解析它。

如果是 json 文件，请按照步骤操作 ->

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

现在您的 json 文件已转换为 json 对象（Javascript）。

Answer 8

var obj = {
  name: 'dashu3f'
};

var stringObj = JSON.stringify(obj);
console.log(typeof stringObj);
console.log(stringObj);

打开终端此文件夹文件并运行 node json.js