JSON.stringify 文件对象返回 {} - Javascript

当使用 JSON.stringify() 方法来序列化一个包含文件对象(File对象)的JavaScript对象时，文件对象会被转换为一个空的JSON对象 {}。这是因为文件对象并不是一个可以被序列化为JSON格式的值。

以下是一个示例：

const file = new File(['hello, world'], 'hello.txt', {type: 'text/plain'});
const obj = {file};
const jsonString = JSON.stringify(obj);

console.log(jsonString);
// 输出: {"file":{}}

在上面的代码中，我们创建了一个名为 file 的文件对象，然后将它包含在一个名为 obj 的JavaScript对象中，最后使用 JSON.stringify() 方法来将 obj 序列化为一个JSON字符串。然而，我们发现在生成的JSON字符串中，file 对象被转换为空对象 {}，而且没有任何文件信息被保留下来。

这是因为文件对象不是基本类型的JavaScript值，而是一个复杂的对象。在序列化过程中，JSON.stringify() 方法只会保留基本类型的数据，如字符串、数字、布尔值、数组和普通对象。对于其他类型的数据，如日期对象、正则表达式对象和文件对象，JSON.stringify() 方法会将它们转换为空对象 {}。

所以，如果你需要将文件对象作为JSON的一部分进行传输或存储，你需要在序列化之前将文件信息转换为基本类型的JavaScript值，例如字符串或二进制数据。以下是一个示例：

const file = new File(['hello, world'], 'hello.txt', {type: 'text/plain'});

const fileReader = new FileReader();

fileReader.onload = function(event) {
  const fileContents = event.target.result;
  const obj = {fileName: file.name, fileType: file.type, fileContents};
  const jsonString = JSON.stringify(obj);

  console.log(jsonString);
  // 输出: {"fileName":"hello.txt","fileType":"text/plain","fileContents":"aGVsbG8sIHdvcmxk"}
};

fileReader.readAsDataURL(file);

在上面的代码中，我们使用 FileReader 对象来读取文件内容，并将文件信息转换为一个包含文件名、文件类型和文件内容的JavaScript对象。然后，我们使用 JSON.stringify() 方法将该对象序列化为一个JSON字符串，最后输出该字符串。这种方法可以保留文件信息，并将文件内容转换为字符串或二进制数据。