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