Angular Fire v7.6如何从本地路径上传图片至Firebase Storage？

浏览器环境下无法直接通过本地文件路径字符串读取文件内容，这是出于安全策略的限制。正确的做法是从HTML文件选择器获取File对象（File是Blob的子类，可直接被uploadBytes接收），而非仅传递文件路径字符串。以下是修正后的实现方案：

修正后的ImageService代码 #

import {Injectable} from '@angular/core';
import {Storage, ref, uploadBytes} from '@angular/fire/storage';
import {from, map, Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ImageService {
  constructor(private firebaseStorage: Storage) { }

  uploadImage(id: number, file: File, name: string): Observable<string> {
    // 从File对象中提取文件扩展名
    const ext = file.name.split('.').pop();
    const fileRef = ref(this.firebaseStorage, `/${id}/${name}.${ext}`);
    
    // File对象继承自Blob，可直接传入uploadBytes
    return from(uploadBytes(fileRef, file)).pipe(
      map(taskSnapshot => taskSnapshot.ref.fullPath)
    );
  }
}

组件中调用上传方法示例 #

在组件模板中添加文件选择控件：

<input type="file" accept="image/*" (change)="onFileSelected($event)">

组件类中处理文件选择事件并调用上传方法：

import { Component } from '@angular/core';
import { ImageService } from './image.service';

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html'
})
export class ImageUploadComponent {
  constructor(private imageService: ImageService) {}

  onFileSelected(event: Event): void {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
      // 这里的id和name可根据业务逻辑动态传入
      this.imageService.uploadImage(123, file, 'user-avatar').subscribe(
        path => console.log('文件上传完成，存储路径：', path),
        error => console.error('上传失败：', error)
      );
    }
  }
}

特殊场景补充（非浏览器环境） #

如果是在Electron等允许直接访问本地文件系统的环境中，可通过Node.js的fs模块读取文件为Buffer后转换为Blob：

import * as fs from 'fs';

// 仅适用于Electron/Node.js环境
const fileBuffer = fs.readFileSync(filePath);
const blob = new Blob([fileBuffer]);
// 后续将blob传入uploadBytes即可完成上传

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