如何自定义角度文件上传器答案

【问题标题】：how to customize angular-file-uploader如何自定义角度文件上传器
【发布时间】：2018-08-27 15:52:02
【问题描述】：

我是 Angular 4 的新手。我不知道如何自定义 angular-file-uploader。我选择了以下组件。 https://www.npmjs.com/package/angular-file-uploader/v/4.0.0

我想自定义 html 模板或在单击重置按钮时做一些事情。

在打字稿文件中，我写了

import * as FileUploadComponent from "angular-file-uploader";
 @ViewChild('fileUpload1')

    public fileUpload1: FileUploadComponent;

但我遇到了错误

ERROR in /app/solvup-file-uploader/solvup-file-uploader.component.ts(15,25):
    Cannot find name 'FileUploadModule'.
ERROR in /app/solvup-file-uploader/services/file-uploader.service.ts (4,9): 
    Module '"/home/hostjinal/Projects/form-builder-front-end/node_modules/angular-file-uploader/index"' has no default export.

请告诉我。

【问题讨论】：

标签： angular

【解决方案1】：

您实际上并不需要 npm 包来执行此操作。这是我在其中一个组件中编写的代码，而不是使用 npm 包。

在TS文件中

@ViewChild('fileInput') 文件输入；

上传点击的处理程序

public upload() {

    this.progress = 0;

    const fileBrowser = this.fileInput.nativeElement;
    if (fileBrowser.files && fileBrowser.files[0]) {

      const formData = new FormData();
      formData.append('file', fileBrowser.files[0]);

      this._appHttpService.postUploadFile(formData).subscribe(res => {
        this._uploadModel = res;

        // console.log(res);

      });
    }
  }

httpservice 中的代码。

  public postUploadFile(formData: FormData): Observable<uploadModel[]> {
        const uploadUrl =
         environment.serverBaseUrl +
        environment.uploadUrl;

        return this._http.post(uploadUrl, formData, this.uploadOptions)
            .map(res => {
                return <uploadModel[]>res;
            })
            .catch(this.handleError);
    }

这就是我调用它的方式。

<button type='button' class="btn btn-primary glyphicon glyphicon-upload col-sm-1" (click)="upload()"> Upload</button>

如果您仍在寻找解决问题的方法。您是否检查了以下说明？

在您的 app.module.ts 中导入 FileUploadModule

import { FileUploadModule } from "angular-file-uploader";
@NgModule({
  imports: [
      ...,
      FileUploadModule,
      ...
  ]
})

【讨论】：