Ionic 5 Android 13+使用<input type='file'/>从谷歌云端硬盘选文件报DOMException错误

问题现象 #

在Ionic 5、Android 13及以上环境中，使用<input type="file">组件从谷歌云端硬盘选取文件时，触发DOMException，错误提示：

DOMException: 无法读取请求的文件，通常是因为获取文件引用后出现了权限问题。

涉及代码 #

HTML代码 #

<input  type="file"
        accept="*" 
        hidden="true" 
        (click)="$event.stopPropagation();$event.target['value']=null;" 
        (change)="pickFile($event)" />

TypeScript代码 #

pickFile(ev) {
     let file = event && event.target.files[0];
     let reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = (_event: any) => {
     }
     reader.onerror = (_event: any) => { 
     // 触发错误
       DOMException: The requested file could not be read, 
       typically due to permission problems that have occurred after a reference 
       to a file was acquired.
     }
}

问题原因 #

Android 13+ 收紧了文件访问权限，同时谷歌云端硬盘返回的文件对象是沙箱内的虚拟引用，FileReader无法直接读取这类受权限限制的云端文件引用。

解决方案 #

改用fetch API结合URL.createObjectURL()来读取文件内容，替代直接使用FileReader读取原始文件对象：

pickFile(ev) {
  const file = ev.target.files[0];
  if (!file) return;

  fetch(URL.createObjectURL(file))
    .then(response => response.blob())
    .then(blob => {
      // 将blob转为DataURL（按需处理）
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = (_event: any) => {
        // 这里处理文件内容，比如获取DataURL
        const dataUrl = _event.target.result;
        // 执行你的业务逻辑
      };
    })
    .catch(error => {
      console.error('文件读取失败:', error);
    });
}

同时需确保应用权限配置正确，在AndroidManifest.xml中添加对应权限：

<!-- Android 13+ 媒体文件权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
<!-- 兼容Android 12及以下的外部存储权限 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

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