使用cordova-plugin-file时URL.createObjectURL调用失败求助

你的问题核心在于Cordova提供的File对象并非浏览器原生的window.File实例——它仅模拟了File的属性，但未继承原生Blob接口，因此无法直接被URL.createObjectURL()识别。以下是几种可行的解决方案：

方案1：用FileReader生成Data URL #

这是最可靠的方式，通过FileReader读取文件二进制内容，生成可直接用于img.src的base64格式Data URL：

const CAMERA_OPTIONS = {
  quality: 50,
  destinationType: Camera.DestinationType.FILE_URI,
  encodingType: Camera.EncodingType.JPEG,
}

captureImage = function () {
  return new Promise((resolve, reject) => {
    navigator.camera.getPicture(
      imageURI => resolveLocalFileSystemURL(imageURI, fileEntry => {
        fileEntry.file(file => {
          const reader = new FileReader();
          reader.onload = e => resolve(e.target.result);
          reader.onerror = reject;
          reader.readAsDataURL(file);
        }, reject),
        reject,
        CAMERA_OPTIONS
      )
    })
  })
}

方案2：正确使用cdvfile协议 #

fileEntry.toURL()生成的cdvfile://协议URL本身有效，但需要配置Content Security Policy（CSP）允许该协议：

1. 在index.html的CSP meta标签中添加cdvfile:源：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' cdvfile: data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;">

2. 直接使用fileEntry.toURL()作为图片地址：

// 在fileEntry的回调中
resolve(fileEntry.toURL());

方案3：切换相机返回格式为DATA_URL #

如果对照片体积要求不高，可以直接让相机返回base64数据，省去文件系统操作：

const CAMERA_OPTIONS = {
  quality: 50,
  destinationType: Camera.DestinationType.DATA_URL, // 修改目标格式
  encodingType: Camera.EncodingType.JPEG,
}

captureImage = function () {
  return new Promise((resolve, reject) => {
    navigator.camera.getPicture(
      imageData => resolve(`data:image/jpeg;base64,${imageData}`),
      reject,
      CAMERA_OPTIONS
    )
  })
}

关于失败原因的说明 #

• Cordova的File是自定义实现，仅复制了原生File的属性（如name、size），但未继承Blob接口，因此f instanceof Blob返回false，也不被URL.createObjectURL()支持。
• 直接将Cordova的File传入Blob构造函数，只是把自定义对象作为Blob内容，而非文件的二进制数据，因此生成的URL无效。

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