Capacitor File Picker在移动端无法返回Blob问题求助

问题说明 #

使用@capawesome/capacitor-file-picker选择文件时，返回的文件对象仅包含元数据（名称、MIME类型、路径等），没有直接提供blob字段，导致原代码中判断file.blob的逻辑失效。

解决方案 #

可以通过文件路径手动读取文件内容并转换为Blob对象，以下是两种可行方法：

方法1：使用Fetch API读取路径生成Blob

直接利用浏览器的Fetch API读取文件路径，将响应转换为Blob：

const result = await FilePicker.pickFiles({
  types: ['application/pdf'],
  multiple: false,
});

const file = result.files[0];

// 读取文件路径并转为Blob
const response = await fetch(file.path);
const blob = await response.blob();

// 转换为File对象（按需使用）
const rawFile = new File([blob], file.name, { type: file.mimeType });
callback(rawFile, file.name);

方法2：使用@capacitor/filesystem插件读取文件

如果Fetch API在部分移动端环境存在兼容性问题，可以借助Capacitor官方的Filesystem插件：

1. 先安装插件：

npm install @capacitor/filesystem
npx cap sync

2. 读取文件并转换为Blob：

import { Filesystem } from '@capacitor/filesystem';

const result = await FilePicker.pickFiles({
  types: ['application/pdf'],
  multiple: false,
});

const file = result.files[0];

// 读取文件内容（注意移除file://前缀）
const readResult = await Filesystem.readFile({
  path: file.path.replace('file://', ''),
});

// 将base64内容转为Blob
const byteCharacters = atob(readResult.data);
const byteArray = new Uint8Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteArray[i] = byteCharacters.charCodeAt(i);
}
const blob = new Blob([byteArray], { type: file.mimeType });

// 转换为File对象（按需使用）
const rawFile = new File([blob], file.name, { type: file.mimeType });
callback(rawFile, file.name);

补充说明 #

插件默认不返回Blob是因为移动端文件可能较大，直接返回Blob会占用过多内存，因此仅提供文件路径和元数据，由开发者按需读取文件内容。

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