Ionic Capacitor Filesystem writeFile报NO_DATA错误求助（Android）

当使用@awesome-cordova-plugins/camera-preview拍摄的图片能正常展示，但调用Capacitor的Filesystem.writeFile时抛出NO_DATA错误，核心原因通常是Base64数据格式不符合Filesystem的解析要求，以下是具体排查和解决方法：

核心问题分析 #

CameraPreview返回的Base64数据可能包含无效字符（如换行、空格），或使用了URL-safe编码（用-替代+、_替代/），导致Filesystem无法识别有效数据，从而抛出NO_DATA错误。尽管图片能在UI中正常展示（浏览器对Base64的容错性更高），但Capacitor的Filesystem接口对数据格式要求更严格。

解决方案 #

1. 清理并标准化Base64数据 #

对CameraPreview返回的Base64数据进行清理，移除无效字符并转换为标准Base64编码：

修改savePicture方法如下：

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

private async savePicture(base64Imagedata: string) {
  console.log("base 64 image data is " + base64Imagedata);
  console.log("going to save the picture to file");
  console.log("Data directory full path is " + Directory.Data);

  // 清理并标准化Base64数据
  const sanitizedBase64 = base64Imagedata
    .replace(/\s/g, '') // 移除所有空白字符（换行、空格、制表符）
    .replace(/-/g, '+') // 替换URL-safe的特殊字符
    .replace(/_/g, '/');

  // 验证数据有效性
  if (!sanitizedBase64 || sanitizedBase64.length === 0) {
    console.error("Invalid base64 data after sanitization");
    return;
  }

  const fileName = new Date().getTime() + '.jpeg';
  try {
    const savedFile = await Filesystem.writeFile({
      path: fileName,
      data: sanitizedBase64,
      directory: Directory.Data
    });
    console.log("Picture saved successfully: ", savedFile);
  } catch (err) {
    console.error("Error saving picture: ", err);
  }
}

2. 改用Uint8Array写入文件 #

如果标准化Base64后仍报错，可将Base64转换为Uint8Array格式，绕开字符串编码解析问题：

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

private async savePicture(base64Imagedata: string) {
  console.log("base 64 image data is " + base64Imagedata);
  console.log("going to save the picture to file");
  console.log("Data directory full path is " + Directory.Data);

  // 清理Base64数据
  const sanitizedBase64 = base64Imagedata
    .replace(/\s/g, '')
    .replace(/-/g, '+')
    .replace(/_/g, '/');

  // 转换为Uint8Array
  const rawData = window.atob(sanitizedBase64);
  const uint8Array = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; i++) {
    uint8Array[i] = rawData.charCodeAt(i);
  }

  const fileName = new Date().getTime() + '.jpeg';
  try {
    const savedFile = await Filesystem.writeFile({
      path: fileName,
      data: uint8Array,
      directory: Directory.Data
    });
    console.log("Picture saved successfully: ", savedFile);
  } catch (err) {
    console.error("Error saving picture: ", err);
  }
}

3. 优化CameraPreview配置（可选） #

如果后续需要更高效的文件处理，可将CameraPreview的storeToFile设为true，插件会直接将图片保存到设备文件系统并返回文件路径，无需手动处理Base64转换：

const cameraPreviewOpts: CameraPreviewOptions = {
  // 其他配置保持不变
  storeToFile: true,
}

调用takePicture后会返回文件路径，直接使用该路径进行文件操作即可。

额外验证步骤 #

• 在savePicture中打印sanitizedBase64的长度，确认数据未被截断
• 将处理后的Base64重新生成图片URL（'data:image/jpeg;base64,' + sanitizedBase64），验证数据完整性是否正常

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