基于Ionic v6.20+Angular v14，如何读取移动端图片路径生成Blob？

在Ionic/Angular移动端环境中，浏览器原生的FileReader无法直接读取本地文件路径（如/tmp/blah/blah/image.jpg），必须借助Ionic Native的File插件来实现原生文件系统的访问。以下是具体实现步骤：

1. 安装依赖插件 #

首先安装Ionic Native的File插件及对应的Cordova原生插件：

npm install @ionic-native/file
ionic cordova plugin add cordova-plugin-file

2. 配置Angular模块 #

在你的App模块（如app.module.ts）中导入File模块并添加到提供者列表：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { File } from '@ionic-native/file/ngx';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [File], // 注入File服务
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 实现文件读取与Blob转换 #

在组件中注入File服务，编写读取图片文件并转为Blob的方法：

import { Component } from '@angular/core';
import { File } from '@ionic-native/file/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private file: File) {}

  /**
   * 从本地文件路径读取图片并转为Blob
   * @param filePath 图片的完整本地路径，如'/tmp/blah/blah/image.jpg'
   */
  async getImageBlob(filePath: string): Promise<Blob> {
    try {
      // 拆分完整路径为目录路径和文件名
      const pathParts = filePath.split('/');
      const fileName = pathParts.pop() as string;
      const directoryPath = pathParts.join('/');

      // 读取文件为ArrayBuffer，直接转为Blob
      const fileBuffer = await this.file.readAsArrayBuffer(directoryPath, fileName);
      
      // 根据文件扩展名设置正确的MIME类型
      const mimeType = this.getMimeTypeFromExtension(fileName);
      return new Blob([fileBuffer], { type: mimeType });
    } catch (err) {
      console.error('读取图片文件失败:', err);
      throw err;
    }
  }

  /**
   * 根据文件名后缀获取对应的MIME类型
   */
  private getMimeTypeFromExtension(fileName: string): string {
    const ext = fileName.split('.').pop()?.toLowerCase();
    switch (ext) {
      case 'jpg':
      case 'jpeg':
        return 'image/jpeg';
      case 'png':
        return 'image/png';
      case 'gif':
        return 'image/gif';
      default:
        return 'image/jpeg'; // 默认类型
    }
  }
}

关键说明 #

• 为什么不能用FileReader：浏览器的FileReader仅能处理浏览器环境生成的File或Blob对象，无法直接访问移动端的本地文件系统路径，必须通过原生插件桥接。
• readAsArrayBuffer是最高效的方式：直接获取文件的二进制缓冲区，无需额外编码解码，直接转换为Blob即可。
• 权限配置：确保在config.xml中配置了必要的文件访问权限，比如iOS的NSPhotoLibraryUsageDescription、Android的android.permission.READ_EXTERNAL_STORAGE等。

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