Question

我正在尝试在Web应用程序中上传一个或多个文件。我已经尝试过由vData.service.ts文件引起的代码和错误

错误：VDataservice上不存在属性'yoursHeadersConfig'
  属性“ catchError”在“可观察”上不存在
  属性“ HandleError”在“ VDataservice”上不存在

您能否让我知道如何解决此问题并为在Web应用程序中上传多个文件提供一个思路？我已为该问题提供了完整的相关代码。

要害链接：
ad.component.html：https://gist.github.com/aarivalagan/ac15e8e2c6f77d0687c01a70e18bca6b 广告：component.ts：https://gist.github.com/aarivalagan/a9c1d22c1d6056da624f0968fb6cd59c vData.service.ts：https://gist.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中定义这些属性，因此无法使用this调用这些方法。

您可以尝试将以下方法添加到VDataservice文件中：

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

在Angular5中上传文件

1 个答案: