如何使用showOpenFilePicker获取fileSystemHandle并读取文件

你遇到的核心问题是没理清FileSystemFileHandle的使用逻辑——它只是文件的句柄，并非文件本身，必须先调用它的getFile()方法获取实际的File对象（File继承自Blob，支持所有Blob的读取接口），之后才能读取文件内容。

修正后的代码（使用FileReader） #

/**
 * Used to import via a simple button.
 * The caller must call window.showOpenFilePicker() and give the
 * fileHandle to this API.
 * @param {FileSystemFileHandle|FileSystemFileHandle[]} fileHandle 
 * @param {Function} fnImportToUI 
 */
fio.importFromFileButton = async function(fileHandle, fnImportToUI) {
  if (Array.isArray(fileHandle)) {
    fileHandle = fileHandle[0];
  }
  // 关键步骤：通过文件句柄获取File对象
  const file = await fileHandle.getFile();
  const reader = new FileReader();
  
  reader.addEventListener('loadend', (event) => {
    fnImportToUI(fileHandle, event.target.result);
    // 若需Blob对象，直接使用file即可（File是Blob的子类）
    // const blob = file;
  });
  
  reader.readAsArrayBuffer(file); // 传入获取到的File对象，而非未定义的变量
}

更简洁的写法（使用File原生异步方法） #

File对象自带text()、arrayBuffer()等异步读取方法，无需手动创建FileReader，代码更简洁：

/**
 * Used to import via a simple button.
 * The caller must call window.showOpenFilePicker() and give the
 * fileHandle to this API.
 * @param {FileSystemFileHandle|FileSystemFileHandle[]} fileHandle 
 * @param {Function} fnImportToUI 
 */
fio.importFromFileButton = async function(fileHandle, fnImportToUI) {
  if (Array.isArray(fileHandle)) {
    fileHandle = fileHandle[0];
  }
  const file = await fileHandle.getFile();
  // 读取为ArrayBuffer
  const arrayBuffer = await file.arrayBuffer();
  fnImportToUI(fileHandle, arrayBuffer);
  
  // 如需读取为文本内容，替换为以下代码：
  // const textContent = await file.text();
  // fnImportToUI(fileHandle, textContent);
}

原代码错误说明 #

你之前的代码存在两个核心问题：

1. 直接将FileSystemFileHandle传入FileReader的读取方法，而FileReader仅接受Blob/File类型的参数
2. 调用reader.readAsArrayBuffer(blob)时，blob尚未赋值（仅在loadend回调中才会被定义），逻辑顺序完全颠倒

内容的提问来源于stack exchange，提问作者Sanford A Staab