从 URL 获取文件大小

Question

我有一个图像/视频的 URL 列表。我想在网站上显示文件大小和图像。我使用常规 img 标签来渲染图像。现在，我需要显示文件的大小作为附加详细信息。

我正在使用 Angular，我尝试了以下操作：

this._httpGet(url, { responseType: 'blob' })

但这并没有帮助。它会产生不需要的结果。

有人可以帮助我实现同样的目标吗？

谢谢你。

Answer 1

获取 Blob 并计算大小的服务：在 Angular 中创建一个服务，使用 HttpClient 以 Blob 形式获取资源。然后，计算该 Blob 的文件大小。

在组件中显示图像和大小：使用组件中的服务来获取大小并将其与图像一起显示。

这是一个简单的实现：

第 1 步：创建服务

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

@Injectable({
  providedIn: 'root'
})
export class FileSizeService {

  constructor(private http: HttpClient) { }

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

此服务有一个 fetchFileSize 方法，该方法向提供的 URL 发出 HTTP GET 请求并返回文件大小的 Observable。

第2步：组件实现 在您的组件中，您可以使用此服务来获取每个 URL 的大小并将其存储在要在模板中显示的变量中。

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

@Component({
  selector: 'app-image-display',
  template: `
    <div *ngFor="let item of imageUrlList">
      <img [src]="item.url" alt="image">
      <p>Size: {{item.size}} bytes</p>
    </div>
  `
})
export class ImageDisplayComponent implements OnInit {
  imageUrlList: Array<{ url: string, size?: number }> = [
    { url: 'https://example.com/image1.jpg' },
    // ... other URLs
  ];

  constructor(private fileSizeService: FileSizeService) { }

  ngOnInit() {
    this.imageUrlList.forEach(item => {
      this.fileSizeService.fetchFileSize(item.url).subscribe(size => {
        item.size = size;
      });
    });
  }
}

在此组件中，您有一个图像 URL 列表。对于每个 URL，组件调用 fetchFileSize 并更新 imageUrlList 中的大小。

Answer 2

这将尝试将实际内容加载到客户端，您需要注意这一点。如果不将内容加载到客户端，您将无法获取内容的文件大小。

您应该考虑服务器端解决方案，这意味着服务器读取文件大小并将其返回给客户端。

Answer 3

在 Angular 中，您可以使用以下方法来确定 URL 中的图像或视频的文件大小。诀窍是向服务器发送 HEAD 请求以仅获取标头，包括“Content-Length”标头，该标头指示文件的大小。

  getFileSize(url: string): Promise<number> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

    return this.http.head(url, { headers, observe: 'response', responseType: 'text' })
      .toPromise()
      .then(response => {
        const contentLength = response.headers.get('Content-Length');
        if (contentLength) {
          return parseInt(contentLength, 10);
        } else {
          throw new Error('Content-Length header not found');
        }
      })
      .catch(error => {
        console.error('Error fetching file size:', error);
        throw error;
      });
  }

您可以在您的组件中使用此服务，如下所示：

ngOnInit(): void {
    this.fileSizeService.getFileSize(this.imageUrl)
      .then(size => {
        console.log(size, '==>file size');
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }