Angular5文件上傳及進度報告、文件下載

今天做文件上傳時的一些經驗，我覺得有必要分享一下，在官網上也能找到實例，想學習交流的同學可以在底下評論，期待共同進步

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { of, Observable } from 'rxjs';
import { UploadService } from './services/upload.service';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {

  public percent: string = '0';
  // 是否顯示進度條
  public hasProgress: boolean = false;

  constructor(
    public http: HttpClient,
    public uploadService: UploadService
  ) { }

  ngOnInit() {}
  // 上傳
  onUpload(event) {
    let formData = new FormData();
    event.files.map(res => {
      formData.append("file", res);
    })
    this.uploadService.upload(formData, (body) => {
        // 返回值處理
        console.log(body);

    }).subscribe((res: any) => {
    	// 顯示進度
        this.percent = res;
      })
  }
    download() {
      // url: http://123.jpg
      this.uploadService.download('url').subscribe(
        (res:any) => {
          // 創建指向文件的url
          let objUrl = URL.createObjectURL(res);
          let tagA = document.createElement("a");
          tagA.innerHTML = 'file fullName';
          tagA.download = 'file fullName';
          tagA.href = objUrl ;
          document.getElementsByTagName("body")[0].appendChild(link);
          // 釋放鏈接
          // URL.revokeObjectURL(objectURL);
      }
    );
  }
  

}

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpHeaders, HttpEventType, HttpEvent } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap, last } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class UploadService{
    private uploadUrl = '/upload';

    constructor(
        private http: HttpClient
    ) { }

    // 文件上傳
    upload(data: FormData, fn) {
        const req = new HttpRequest('POST', this.uploadUrl, data, {
            reportProgress: true
        });

        return this.http.request(req).pipe(
            map(event => this.getEventMessage(event, fn))
        );
    }
    // 文件下載
  	download(url) {
	  	// 設置響應類型blob
        return this.http.post('/v1/download', { path: url }, { responseType: "blob" })
    }
    private getEventMessage(event: HttpEvent<any>, fn: Function) {
        
        switch (event.type) {
            case HttpEventType.Sent:
                return `開始上傳文件`;
			// 正在上傳
            case HttpEventType.UploadProgress:
                const percentDone = Math.round(100 * event.loaded / event.total);
                return `${percentDone}%`;
			// 上傳完畢
            case HttpEventType.Response:
           		// 回調
                fn(event.body);
                return '文件上傳完畢';
            default:
                return `文件上傳`;
        }
    }

}

node服務器模擬下載

		// 如果encoding爲null, 返回值body,爲Buffer類型
       request({ url: req.body.path, method: 'get', encoding: null },
         function (err, response, body) {
           res.send(body);
         }
       )