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);
         }
       )