angular请求文件流

在Angular中请求文件流通常是处理从服务器下载文件（如图片、PDF、视频等）或者上传文件到服务器。这里主要介绍如何在Angular中使用HttpClient模块下载文件流。

首先，确保你的Angular项目中已经导入了HttpClientModule，在你的app.module.ts文件中添加HttpClientModule：

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

接下来，创建一个服务或组件来处理HTTP请求：

1. 下载文件流（下载到本地）

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

@Injectable({
  providedIn: 'root'
})
export class FileService {
  private baseUrl = 'http://example.com/api'; // 服务器API基础URL

  constructor(private http: HttpClient) {}

  downloadFile(fileId: string): Observable<Blob> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      responseType: 'blob' as 'json'
    };

    return this.http.get(this.baseUrl + '/download/' + fileId, httpOptions).pipe(
      map(response => {
        const contentType = response.headers.get('content-type');
        const contentDisposition = response.headers.get('content-disposition');
        const blob = new Blob([response], { type: contentType });
        return blob;
      })
    );
  }
}

在组件中调用服务方法：

import { Component, OnInit } from '@angular/core';
import { FileService } from './file.service';
import { saveAs } from 'file-saver';

@Component({
  selector: 'app-download-file',
  templateUrl: './download-file.component.html',
  styleUrls: ['./download-file.component.css']
})
export class DownloadFileComponent implements OnInit {
  constructor(private fileService: FileService) { }

  ngOnInit() {
    this.downloadAndSaveFile('12345');
  }

  downloadAndSaveFile(fileId: string): void {
    this.fileService.downloadFile(fileId).subscribe(blob => {
      saveAs(blob, 'downloaded-file.pdf'); // 使用file-saver库保存文件
    });
  }
}

2. 上传文件流（发送到服务器）

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

@Injectable({
  providedIn: 'root'
})
export class FileService {
  private baseUrl = 'http://example.com/api'; // 服务器API基础URL

  constructor(private http: HttpClient) {}

  uploadFile(file: File): Observable<any> {
    const formData: FormData = new FormData();
    formData.append('file', file);

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data'
      })
    };

    return this.http.post(this.baseUrl + '/upload', formData, httpOptions);
  }
}

在组件中调用服务方法：

import { Component } from '@angular/core';
import { FileService } from './file.service';

@Component({
  selector: 'app-upload-file',
  templateUrl: './upload-file.component.html',
  styleUrls: ['./upload-file.component.css']
})
export class UploadFileComponent {
  constructor(private fileService: FileService) { }

  upload() {
    const fileInput = document.getElementById('file-input') as HTMLInputElement;
    const file = fileInput.files[0];
    if (file) {
      this.fileService.uploadFile(file).subscribe(response => {
        console.log('File uploaded successfully', response);
      }, error => {
        console.error('File upload failed', error);
      });
    } else {
      console.log('Please select a file to upload.');
    }
  }
}

确保在你的HTML文件中提供一个文件输入控件：

<input type="file" id="file-input">
<button (click)="upload()">Upload File</button>