Question

我是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.

请让我知道。

Answer 1

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

在TS文件中

@ViewChild（'fileInput'）fileInput;

上传点击处理程序

this.Refresh()

httpservice中的代码。

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);

      });
    }
  }

这是我如何调用它。

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

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

在app.module.ts中导入FileUploadModule

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

如何自定义angular-file-uploader

1 个答案: