Angular 文件上传、下载

1. 文件上传

• 本地可同时选择多个文件

• 将本地所选择的文件列出来

• 单个文件上传至服务器；

• 删除本地选择的文件

• 样式使用了bootstrap的样式

---

1. html - file.component.html

• 文件上传按钮

• 文件列表(文件名称、状态、操作 - 删除、上传)

<form class="form-horizontal" enctype="multipart/form-data">

   <div class="form-group">
            <label class="col-sm-2 control-label">选择文件</label>
            <div class="col-sm-9">

             <!-- 选择本地文件 - multiple="multiple"多选；accept=".xls,.doc,.pdf"限制条件；(change)="fileChange()"每次选择本地文件完成后触发的函数；-->
              <input type="file" class="btn" multiple="multiple" (change)="fileChange()" accept=".xls,.doc,.pdf" #filesMulti style="padding-left:0; "/>

             <!-- 本地文件列表 -->
              <table *ngIf="fileData.length && fileData" class="table table-bordered table-striped wjccgl_table" id="file_name_contain" #fileNameContain>
                <thead>
                  <tr>
                    <td>文件名</td>
                    <td>操作</td>
                    <td>状态</td>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of fileData, let i = index">
                    <td>{{item.fileName}}</td>
                    <td>
                      <a href="javascript:;" (click)="fileDel(item.fileName)">删除</a>
                    </td>
                    <td>
                      <a href="javascript:;" (click)="fileUpload(item.file, i)">上传</a>
                      <span class="label label-default" *ngIf="item.status === '未上传'">未上传 </span>
                      <span class="label label-success" *ngIf="item.status === '已上传'">已上传 </span>
                      <span class="label label-error" *ngIf="item.status === '上传失败'">上传失败 </span>
                    </td>
                  </tr>
                </tbody>
              </table>

              <!-- 提示信息 -->
              <p class="help-block">* 目前只支持word/excel/pdf文件上传.</p>
            </div>
          </div></form>

2. ts - file.component.ts

• 记录本地文件数据方法

• 操作本地文件方法（删除本地文件、上传本地文件）

// 导入文件数据的模型文件
import {FileItemModel} from './file.model';

// 声明jquery，目的：在ts环境中可以使用js；
declare const $: any;

export class FileUpComponent implements {

        // 定义文件数组
           fileData: FileItemModel[] = [];

        // 获取文件上传的inputHTML元素
        @ViewChild('filesMulti') private fileMulti: ElementRef;

        // 当选择本地文件后触发此方法
fileChange() { 

    // 获取选中的文件数组
    const t_files = this.fileMulti.nativeElement.files; 

    const fileThis = this;
    for ( let i = 0; i < t_files.length; i++) {
        const fileItem: FileItemModel = new FileItemModel();
        fileItem.fileName = files[i].name;
        fileItem.file = files[i];
        fileItem.status = '未上传';
        fileThis.fileData.push(fileItem);
    }

    // 清空html中file的显示信息
    $(this.fileMulti.nativeElement).val('');
  }

 // 删除选择的本地文件
  fileDel(name: string) {
    for (let i = 0; i < this.fileData.length; i++ ) {
      if (this.fileData[i].fileName === name) {
        this.fileData.splice(i, 1);
      }
    }
  }}

// 单个文件上传

fileUpload(file, index) { 

   // 构造参数
    const formData = new FormData();
    formData.append('file', file, file.name);

    // 上传至服务器
    this.http.post('/file/upload', formData).subscribe((data: any) => {
      if (respData.success && respData.errcode === 2000) { // 如果上传成功

        // 此文件状态改为已上传
        this.fileData[index].status = '已上传';

        // 文件名称改为服务器返回的文件名
        this.fileData[index].fileName = respData.data.fileName;

        // 记录文件的ID
        this.fileData[index].fileId = respData.data.fileId;
      } else {

        // 将此文件的文件状态改为‘上传失败’
        this.fileData[index].status = '上传失败';
      }
    });
  }

3. model - file.model.ts - 定义上传文件所需要的模型类

export class FileItemModel {
  file: object;
  fileId: string;
  fileName: string;
  status: string;
}

4. 预览结果；

1. 未上传状态
   
   

2. 选择本地文件
   
   

3. 文件上传

• 前
  
  

• 后
  
  

---

2. 文件下载

1. html - file.component.html

<a href="javascript:;" (click)="fileDown(文件ID)">需要下载的文件名称</a>

2. ts - file.component.ts

export class FileComponent {

fileDown(fileId: string) { // 下载
    window.location.href = `/file/download?fileId=${fileId}`;
}
}