Chrome扩展开发：读取用户上传JSON文件报错的解决方法

开发Google Chrome扩展时，读取用户上传的JSON文件出现报错：

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

当前代码：

let selectedFile;

document.getElementById("cust").addEventListener('change',(event)=>{
        selectedFile = event.target.files[0];
        
} );

document.getElementById("send").addEventListener('click',()=>{
    if(selectedFile){
        const r = fetch(selectedFile);
        r.then(response => response.json())
        
        
        }
    }
 );

选中的文件对象信息：

File {name: 'customer.json', lastModified: 1672167660694, lastModifiedDate: Tue Dec 27 2022 22:01:00 GMT+0300 (GMT+03:00), webkitRelativePath: '', size: 2558, …}

JSON文件示例：

[
 {
  "First Name": "John",
  "Last Name": "Doe",
  "Email": "test@test.com"
  
 },
 {
  "First Name": "John2",
  "Last Name": "Doe2",
  "Email": "test2@test.com"
 },
 {
  "First Name": "John3",
  "Last Name": "Doe3",
  "Email": "tes3t@test.com",
 }
 ]

注：代码从URL获取JSON时可正常运行，询问如何修复报错。

问题根源 #

fetch() API的作用是发起网络请求获取远程资源，不能直接传入本地File对象。当你把File对象传给fetch时，它会被当作相对URL去请求，结果返回的是浏览器的404或其他HTML页面，所以解析JSON时会遇到<开头的HTML内容，触发语法错误。

正确实现方式 #

应该使用FileReader API读取本地上传的文件，这是处理浏览器中本地文件的标准方法。修改后的代码如下：

let selectedFile;

document.getElementById("cust").addEventListener('change', (event) => {
    selectedFile = event.target.files[0];
});

document.getElementById("send").addEventListener('click', () => {
    if (selectedFile) {
        const reader = new FileReader();
        // 以文本形式读取文件内容
        reader.readAsText(selectedFile);
        
        // 文件读取完成后的回调
        reader.onload = function(e) {
            try {
                const jsonData = JSON.parse(e.target.result);
                // 此处处理解析后的JSON数据
                console.log(jsonData);
            } catch (err) {
                console.error('JSON解析失败:', err);
            }
        };
        
        // 文件读取错误处理
        reader.onerror = function(err) {
            console.error('文件读取错误:', err);
        };
    }
});

额外优化 #

你的JSON示例中最后一个对象的Email字段后多了一个多余的逗号：

{
  "First Name": "John3",
  "Last Name": "Doe3",
  "Email": "tes3t@test.com", // 此处逗号需移除
}

虽然部分JSON解析器能容忍这种尾逗号，但严格来说不符合JSON规范，建议移除以避免潜在的解析问题。

内容的提问来源于stack exchange，提问作者Zeamays