如何使用JavaScript读取上传的JSON/TXT文件并存储到本地变量

问题原因 #

fetch方法仅适用于请求网络资源，无法用于读取本地用户上传的文件：浏览器出于安全沙箱限制，input[type=file]的value属性仅返回带fakepath的虚拟路径，不允许前端直接通过路径访问本地磁盘文件，你需要使用FileReaderAPI读取用户选中的文件对象。

正确实现代码 #

const uploadBtn = document.getElementById("upload-btn");
// 在外层声明变量存储文件内容，方便后续外部调用
let fileContent = null;

uploadBtn.addEventListener("change", function(e) {
  // 获取用户选中的第一个文件
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 限制仅支持TXT、JSON格式文件
  const allowedTypes = ['text/plain', 'application/json'];
  if (!allowedTypes.includes(selectedFile.type)) {
    alert('仅支持上传TXT或JSON格式文件');
    return;
  }

  const reader = new FileReader();
  // 文件读取完成的回调
  reader.onload = function(e) {
    const rawContent = e.target.result;
    // 针对JSON格式自动解析为JS对象
    if (selectedFile.type === 'application/json') {
      try {
        fileContent = JSON.parse(rawContent);
      } catch (err) {
        alert('JSON文件格式错误，请检查后重新上传');
        return;
      }
    } else {
      // TXT格式直接存储原文本
      fileContent = rawContent;
    }
    // 此处可直接使用读取完成的文件内容
    console.log('读取到的文件内容：', fileContent);
  };
  // 以文本格式读取文件
  reader.readAsText(selectedFile);
})

注意事项 #

• 文件读取是异步操作，仅在reader.onload回调触发后才能拿到完整的文件内容，不要在回调外同步读取fileContent变量，此时内容还未完成加载
• 如果你需要支持其他文本类格式，只需在allowedTypes数组中添加对应的MIME类型即可

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