使用FileSystemFileEntry的file()方法丢失MIME类型及其他数据问题

问题根源 #

FileSystemFileEntry的file()是异步方法，如果直接在同步逻辑中处理（比如forEach里直接推数组），数组中会填充未完成的异步操作结果（而非真正的File对象），导致日志异常、遍历无响应，同时MIME类型因File对象未正确初始化而丢失。

解决步骤 #

1. 异步转换确保File对象完整生成

必须等待每个file()操作完成后再将File对象推入数组，推荐使用async/await或Promise.all()批量处理：

方法一：async/await 逐一遍历转换

async function entriesToFiles(fileEntries) {
  const files = [];
  for (const entry of fileEntries) {
    // 用Promise包装file()的异步回调
    const file = await new Promise(resolve => entry.file(resolve));
    // 手动补全丢失的MIME类型（按需扩展后缀映射）
    if (!file.type) {
      const ext = entry.name.split('.').pop().toLowerCase();
      const mimeMap = {
        jpg: 'image/jpeg',
        png: 'image/png',
        pdf: 'application/pdf',
        docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      };
      file.type = mimeMap[ext] || '';
    }
    files.push(file);
  }
  return files;
}

// 使用示例
entriesToFiles(yourFileEntryList).then(files => {
  // 这里可正常遍历、操作File数组
  files.forEach(file => console.log(file.name, file.type));
});

方法二：Promise.all 批量转换

function batchEntriesToFiles(fileEntries) {
  const convertPromises = fileEntries.map(entry => {
    return new Promise(resolve => {
      entry.file(file => {
        // 补全MIME类型逻辑
        if (!file.type) {
          const ext = entry.name.split('.').pop().toLowerCase();
          const mimeMap = {
            jpg: 'image/jpeg',
            png: 'image/png',
            pdf: 'application/pdf'
          };
          file.type = mimeMap[ext] || '';
        }
        resolve(file);
      });
    });
  });
  return Promise.all(convertPromises);
}

// 使用示例
batchEntriesToFiles(yourFileEntryList).then(files => {
  console.log(files); // 完整的File数组，可正常遍历
});

2. 验证转换结果

转换完成后，可通过console.log(files)确认数组中每个元素都是标准File对象，包含name、type、size等属性。

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