Angular文件上传示例

以下为Angular的文件上传示例，分为三个步骤。

步骤一、创建HTML模板 (file-upload.component.html)

简单的创建一个类型为file的input标签，input上添加change事件，用来监控文件的选择。

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)">
</div>

步骤二：在TypeScript文件里添加文件上传的处理 (file-upload.component.ts)

定义一个变量用于存放选择的文件：

fileToUpload: File = null;

新建chang事件的处理函数：

handleFileInput(files: FileList) {

this.fileToUpload = files.item(0);

}

如果要处理多文件选择，则可以遍历此文件数组。 现在通过调用file-upload.service创建文件上传功能：

uploadFileToActivity() {
    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
      // 上传成功处理
      }, error => {
        console.log(error);
      });
  }

步骤三、文件上传服务 (file-upload.service.ts)

通过POST方法上传文件，使用FormData，这样就可以将文件使用http请求。

postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
      .post(endpoint, formData, { headers: yourHeadersConfig })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}

到此，一个简单使用的文件上传就实现了。