在Angular5中上傳文件

Question

我試圖在我的Web應用程序中上傳一個或多個文件。 我嘗試使用vData.service.ts文件引起的代碼和錯誤

錯誤：VDataservice上不存在屬性“ yoursHeadersConfig”
屬性“ catchError”在“可觀察”上不存在
VDataservice上不存在屬性HandleError

您可以讓我知道如何解決該問題，並提供有關在Web應用程序中上傳多個文件的想法嗎？ 我已為該問題提供了完整的相關代碼。

要點鏈接：
ad.component.html： https://gist.github.com/aarivalagan/ac15e8e2c6f77d0687c01a70e18bca6b廣告：component.ts： https://gist.github.com/aarivalagan/a9c1d22c1d6056da624f0968fb6cd59c vData.service.ts： https：//開頭要點。 github.com/aarivalagan/8bfbe47ef8cf0dac267374a8f0ef5b0f

代碼：ad.component.html

<div class="form-group col-sm-12">
        <label for="usr">Choose file to Upload </label>
        <input type="file" multiple formControlName="file" class="form-control" id="file" (change)="handleFileInput($event.target.files)" accept=".pdf,.docx" required>
      </div>

ad.component.ts

handleFileInput(files: FileList) {
        this.fileToUpload = files.item(0);
    }
    uploadFileToActivity() {
        this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
          // do something, if upload success
          }, error => {
            console.log(error);
          });
      }

vData.service.ts

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

Answer 1

對於catchError使用pipe運算符

屬性“ catchError”在“可觀察”上不存在

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

---

錯誤：VDataservice上不存在屬性“ yoursHeadersConfig”

VDataservice上不存在屬性HandleError

您VDataservice在VDataservice定義這些屬性，因此無法使用this來調用這些方法。

您可以嘗試將以下方法添加到VDataservice文件中：

HandleError(error){
   // write your logic to handle error here
}