使用Capacitor写入blob到文件后无法正常读取返回内容如何解决

• 你直接将fetch返回的Blob对象传入了Filesystem.writeFile的data参数，未提前做格式转换
• Capacitor的Filesystem接口原生不支持直接接收Blob类型作为写入数据，默认会将传入的非字符串/非base64内容强制调用toString()转为[object Blob]字符串，再按默认的base64编码存储。你看到的读取结果{data: "ZumJPw=="}就是这段默认字符串的base64编码值，完全没有写入PNG的实际二进制内容。

方案1：转为Base64写入（全版本兼容） #

这是适配所有Capacitor版本的最稳妥方案，代码示例如下：

// 1. 请求获取PNG的Blob数据
const response = await fetch(/* 你的PNG资源地址 */);
const blob = await response.blob();

// 2. 将Blob转换为无前缀的base64字符串
const fileReader = new FileReader();
fileReader.readAsDataURL(blob);
const base64Content = await new Promise((resolve, reject) => {
  fileReader.onload = () => resolve(fileReader.result.split(',')[1]);
  fileReader.onerror = reject;
});

// 3. 调用接口写入文件
await Filesystem.writeFile({
  path: 'test.png', // 替换为你要保存的文件名
  data: base64Content,
  directory: Directory.Documents // 替换为你指定的存储目录
});

方案2：使用Uint8Array写入（适配Capacitor 4及以上版本） #

如果不需要兼容旧版本Capacitor，可以直接转Uint8Array写入，省去base64转换逻辑：

const response = await fetch(/* 你的PNG资源地址 */);
const blob = await response.blob();
const uint8Data = new Uint8Array(await blob.arrayBuffer());

await Filesystem.writeFile({
  path: 'test.png',
  data: uint8Data,
  directory: Directory.Documents,
  recursive: true // 如果存储路径包含多级子目录，需添加该参数自动创建目录
});

后续读取文件需要获取Blob对象时，可按以下逻辑转换：

const readRes = await Filesystem.readFile({
  path: 'test.png',
  directory: Directory.Documents
});

// 把返回的base64数据转为Blob
const charList = atob(readRes.data);
const byteArray = new Uint8Array(charList.length);
for (let i = 0; i < charList.length; i++) {
  byteArray[i] = charList.charCodeAt(i);
}
const pngBlob = new Blob([byteArray], { type: 'image/png' });

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