在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
}