浏览器读取大CSV文件显示blob链接而非实际数据如何解决

问题原因 #

你直接访问csv_upload_btn.files[0].data的方式不符合标准：

• File对象本身并没有data属性，小文件时能看到数据是浏览器调试工具对小Blob的自动预览优化，并非标准行为。
• 大文件时浏览器不会自动解析内容，因此返回Blob的引用链接，而非实际文本数据。

解决方案 #

使用浏览器标准的FileReader API异步读取文件内容，该方法支持所有大小的文件，是处理文件上传的正确方式。

完整代码示例 #

// 获取上传的文件对象
const file = csv_upload_btn.files[0];
// 检查是否有文件被选中
if (!file) {
  console.log('请选择一个CSV文件');
  return;
}

// 创建FileReader实例
const reader = new FileReader();

// 文件读取完成后的回调
reader.onload = function(event) {
  // event.target.result 即为文件的完整文本内容
  const csvContent = event.target.result;
  console.log(csvContent);
  // 此处可添加CSV解析逻辑，例如按行拆分、转换为数组等
};

// 读取失败的处理回调
reader.onerror = function(event) {
  console.error('文件读取出错:', event.target.error.message);
};

// 以文本格式读取文件，可指定编码（默认UTF-8）
reader.readAsText(file);

补充说明 #

• FileReader是异步操作，必须通过onload事件获取读取结果，无法同步直接获取内容。
• 针对20MB的文件，readAsText完全可以胜任；如果处理几百MB级别的超大文件，可考虑结合readAsArrayBuffer做流式分段处理。

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