Angular 14 图片上传与获取功能实现问题咨询

1 前置依赖配置 #

Angular v14 同时支持 NgModule 和 Standalone 组件两种开发模式，首先需要确保导入 HttpClientModule 用于网络请求：

• 若使用 NgModule 模式，在 AppModule 的 imports 数组中添加：

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [BrowserModule, HttpClientModule],
  // 其余模块配置
})
export class AppModule {}

• 若使用 Standalone 组件模式，在对应业务组件的 imports 数组中添加：

@Component({
  selector: 'app-image-upload',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  templateUrl: './image-upload.component.html',
})
export class ImageUploadComponent {}

2 图片上传功能实现 #

2.1 组件模板代码 #

<!-- 上传文件选择入口 -->
<input 
  type="file" 
  accept="image/*" 
  (change)="onFileSelected($event)"
  #fileInput
>
<!-- 上传进度提示 -->
<div *ngIf="uploadProgress > 0">上传进度：{{ uploadProgress }}%</div>
<!-- 本地预览区域 -->
<img *ngIf="previewUrl" [src]="previewUrl" alt="预览图" width="200">
<button (click)="submitUpload()" [disabled]="!selectedFile">确认上传</button>

2.2 组件逻辑代码 #

import { Component } from '@angular/core';
import { HttpClient, HttpEventType } from '@angular/common/http';

@Component({
  // 组件配置同上
})
export class ImageUploadComponent {
  selectedFile: File | null = null;
  previewUrl: string | null = null;
  uploadProgress: number = 0;
  uploadResult: any = null;

  constructor(private http: HttpClient) {}

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
      // 生成本地预览图
      const reader = new FileReader();
      reader.onload = () => {
        this.previewUrl = reader.result as string;
      };
      reader.readAsDataURL(this.selectedFile);
    }
  }

  submitUpload(): void {
    if (!this.selectedFile) return;
    const formData = new FormData();
    // 字段名根据后端接口要求调整
    formData.append('image', this.selectedFile, this.selectedFile.name);

    this.http.post('你的后端上传接口地址', formData, {
      reportProgress: true,
      observe: 'events'
    }).subscribe({
      next: (event) => {
        if (event.type === HttpEventType.UploadProgress) {
          // 计算上传进度
          this.uploadProgress = Math.round(100 * (event.loaded / (event.total || 1)));
        } else if (event.type === HttpEventType.Response) {
          this.uploadResult = event.body;
          this.uploadProgress = 0;
          // 上传完成后的后续业务逻辑
        }
      },
      error: (err) => {
        console.error('上传失败', err);
        this.uploadProgress = 0;
      }
    })
  }
}

3 图片获取与展示功能实现 #

3.1 后端返回图片URL场景 #

直接将返回的URL绑定到img标签的src属性即可，示例：

imageList: string[] = [];

getImageList() {
  this.http.get<string[]>('你的后端图片列表接口地址').subscribe(res => {
    this.imageList = res;
  })
}

<div *ngFor="let imgUrl of imageList">
  <img [src]="imgUrl" alt="图片" width="200">
</div>

3.2 后端返回二进制流场景 #

需要指定响应类型为blob，转换为临时URL后展示，注意用完需要释放内存避免泄漏：

getImage(imageId: string) {
  this.http.get('你的后端图片流接口地址/' + imageId, {
    responseType: 'blob'
  }).subscribe(blob => {
    const imageUrl = URL.createObjectURL(blob);
    // 赋值给img的src属性即可展示
    // 组件销毁时调用 URL.revokeObjectURL(imageUrl) 释放内存
  })
}

4 旧版本方案适配注意点 #

你找到的Angular旧版本实现方案大部分逻辑都可以直接复用，仅需注意以下适配点：

• 严格模式下需要补充文件、响应结果的类型判断，避免类型报错
• Standalone 组件模式下不要忘记导入依赖的模块，不需要再在NgModule中声明
• Angular 14 已废弃的旧版RxJS链式调用写法需要调整为当前RxJS版本支持的pipe嵌套写法

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