【本地对象存储】- Angular + ng-zorro实现文件上传

本文档展示了如何使用Springboot框架构建后端API接口，提供本地文件存储服务。前端部分采用Angular和ng-zorro实现，支持文件上传、下载、元数据查询等功能。在文件上传过程中，通过监听HttpEvent来实时显示下载进度，并提供了取消上传的机制。同时，文章还详细列出了服务端和客户端的关键代码实现。

后端API接口项目，请参考local-server 项目，使用Spring boot框架实现本地存储服务。

前端使用Angular + ng-zorro实现，项目源码在这里Gitee

模型（model）

需要定义文件元数据（metadata）模型，描述文件信息, 在local.model.ts中定义

export class Metadata extends BaseEntity {
  createdBy!: string;
  createdDate!: Date;
  name!: string;
  path!: string;
  contentType!: string;
  size!: number;

  constructor(data?: Partial<Metadata>) {
    super(data);
    Object.assign(this, data);

    if (data?.createdDate != undefined) {
      this.createdDate = new Date(data.createdDate);
    }
  }
}

元数据ID在BaseEntity对象中定义。此模型定义了名称，路径，类型，大小等关键信息

服务(Service)

local.service.ts

@Injectable({ providedIn: 'root' })
export class LocalService {
  private baseFileUrl = '/oss/v1/files';
  private baseMetadataUrl = '/oss/v1/metadatas';

  private upload$ = new Subject<Metadata>();
  private remove$ = new Subject<Metadata>();

  constructor(private http: BaseHttpService) {}

  public get onUpload(): Observable<Metadata> {
    return this.upload$.asObservable();
  }

  public get onRemove(): Observable<Metadata> {
    return this.remove$.asObservable();
  }

  uploadEvent(formData: FormData): Observable<HttpEvent<any>> {
    return this.http
      .post<any>(`${this.baseFileUrl}/upload`,