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

Yang Lucky

已于 2022-11-26 18:03:18 修改

阅读量1.4k

点赞数

分类专栏： java 文章标签：前端

于 2022-11-26 17:53:32 首次发布

本文链接：https://blog.youkuaiyun.com/i_mouse/article/details/128054554

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端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`, formData, null, {
        observe: 'events',
        reportProg

最低0.47元/天解锁文章