angular 文件上传、预览、下载demo（angular-file）

前言

项目差不多结束了， 最近在整理项目中学到的知识点，本篇文章主要介绍文件的上传、下载、预览

---

一、angular-file

angular-file — Quick Start、Examples、Directive
以上链接有angular-file文件上传的demo并有指令详细讲解

1. 下载angular-file

npm install angular-file --save-dev

2. 使用angular-file前，需要在相应的module引入ngfModule

代码如下（示例）：

import { ngfModule } from 'angular-file';

@NgModule({
  imports: [
    // other imports ...
    ngfModule
  ],
})
export class AppModule { }

3. ngfSelect 指令

[multiple] : string   // 是否允许多个文件上传
[(files)] : File[]   // 上传文件列表

以下面demo为例

二、文件上传的样式

这里用到了bootstrap样式、Font Awesome图标库（可以通过ngfSelect 指令设置通过点击按钮上传、点击图片上传文件、点击element上传文件）

代码如下（示例）：

<div class="input-group " style="width:400px;">
  <div class="custom-file">
    <input id="upload" class="custom-file-input" style="cursor:pointer;" ngfSelect multiple="true" [(files)]="files"
      (filesChange)="uploadAttachments($event)">
    <label class="custom-file-label" for="upload" data-browse="浏览">选择文件</label>
  </div>
</div>

<button class="btn btn-primary btn-sm " ngfSelect multiple="true"
[(files)]="files" (filesChange)="uploadFile($event)">
<i class="fa fa-upload mr-1"></i>上传
</button>

三、文件上传

以点击按钮上传文件为例，代码如下（示例）：
点击查看forkJoin使用

uploadFile(files: File[]) {
    console.log(files);

    if (!(files && files.length)) {
      return;
    }

    const request = [];
    _.forEach(files, file => {
      request.push(this.fileService.uploadFile(file));  // fileService中向后台post文件数据
    });
    forkJoin(request).subscribe(fileUploadInfos => {
      // 对后台返回的数据做出处理
    });

  }

fileService.ts 代码如下（示例）：

  uploadFile(file: File): Observable<IFileUploadInfo> {
    const myFormData: FormData = new FormData();
    myFormData.append('file', file, file.name);
    const config = new HttpRequest(
      'POST',
      `${this.apiUrl}/upload`,   // api地址
      myFormData,
      {
        reportProgress: true,
      }
    );
    return this.http.request(config).pipe(
      filter(event => event instanceof HttpResponse),
      map(event => {
        if (event instanceof HttpResponse) {
          return event.body as string;
        }
      }),
      catchError(this.sharedService.handleError('upload file', undefined))  // 报错处理
    );
  

---

三、文件预览（pdf.js）

1.下载pdf.js

pdf.js下载地址

2.放入assets文件夹中

3.使用示例

提示：pdf.js的使用步骤非常简单，file.preview_url为后台返回的预览地址，点击图片可以预览 只需要改变a标签的href属性绑定的值前面加入'/assets/pdfjs/web/viewer.html?file='

 <a *ngIf="file.preview_url" target="_blank" [href]="'/assets/pdfjs/web/viewer.html?file=' +file.preview_url">
   <img class="mr-2" style="margin-bottom: 3px; cursor: pointer;" src="/assets/images/open-book.png" />
 </a> 

四、文件下载

提示：file.url为服务端返回的下载url地址

 <a target="_blank"  [href]=" file.url">
   <i class="fa fa-download mr-2 text-primary"></i>
 </a>