Angular中如何从图片/视频URL获取文件大小并展示？

你可以通过HTTP HEAD请求获取文件的Content-Length响应头来得到文件大小，这种方式不需要下载整个文件，比直接GET blob高效得多。以下是具体实现步骤：

1. 创建文件大小服务 #

封装HEAD请求逻辑，专门用来获取文件大小：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, catchError, map, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FileSizeService {
  constructor(private http: HttpClient) {}

  getFileSize(url: string): Observable<number | null> {
    // 发送HEAD请求，只获取响应头
    return this.http.head(url, { observe: 'response' }).pipe(
      map(response => {
        // 从响应头中提取Content-Length
        const contentLength = response.headers.get('Content-Length');
        return contentLength ? parseInt(contentLength, 10) : null;
      }),
      catchError(() => of(null)) // 请求失败时返回null
    );
  }
}

2. 组件中调用服务获取大小 #

在组件中维护媒体列表，批量调用服务获取每个文件的大小：

import { Component, OnInit } from '@angular/core';
import { FileSizeService } from './file-size.service';

// 定义媒体项类型
interface MediaItem {
  url: string;
  type: 'image' | 'video';
  size?: number | null;
}

@Component({
  selector: 'app-media-display',
  templateUrl: './media-display.component.html',
  styleUrls: ['./media-display.component.css']
})
export class MediaDisplayComponent implements OnInit {
  // 你的媒体URL列表
  mediaList: MediaItem[] = [
    { url: 'https://example.com/image1.jpg', type: 'image' },
    { url: 'https://example.com/video1.mp4', type: 'video' },
    // 更多媒体项...
  ];

  constructor(private fileSizeService: FileSizeService) {}

  ngOnInit(): void {
    // 遍历媒体列表，逐个获取大小
    this.mediaList.forEach(item => {
      this.fileSizeService.getFileSize(item.url).subscribe(size => {
        item.size = size;
      });
    });
  }

  // 格式化文件大小为易读格式（B/KB/MB）
  formatFileSize(bytes: number | null): string {
    if (!bytes) return '未知大小';
    if (bytes < 1024) return `${bytes} B`;
    else if (bytes < 1048576) return `${(bytes / 1024).toFixed(2)} KB`;
    else return `${(bytes / 1048576).toFixed(2)} MB`;
  }
}

3. 模板中渲染媒体和大小 #

在组件模板里展示图片/视频，并显示对应的文件大小：

<div *ngFor="let item of mediaList" class="media-item">
  <!-- 渲染图片 -->
  <div *ngIf="item.type === 'image'">
    <img [src]="item.url" alt="媒体文件" class="media-image">
  </div>
  <!-- 渲染视频 -->
  <div *ngIf="item.type === 'video'">
    <video [src]="item.url" controls class="media-video"></video>
  </div>
  <!-- 显示格式化后的文件大小 -->
  <p class="file-size">文件大小：{{ formatFileSize(item.size) }}</p>
</div>

注意事项 #

• 跨域配置：如果媒体文件在第三方域名下，需要该域名的服务器配置CORS，允许HEAD请求，并且通过Access-Control-Expose-Headers: Content-Length暴露Content-Length头，否则前端无法读取该响应头。
• ** fallback方案**：如果服务器不支持HEAD请求或未返回Content-Length，你可以改用GET blob的方式获取大小（但会下载整个文件，不推荐大文件使用）：

  getFileSizeViaBlob(url: string): Observable<number | null> {
    return this.http.get(url, { responseType: 'blob' }).pipe(
      map(blob => blob.size),
      catchError(() => of(null))
    );
  }
  

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