Angular5中的文件上传答案

【问题标题】：File upload in Angular5Angular5中的文件上传
【发布时间】：2019-01-19 13:56:29
【问题描述】：

我正在尝试在我的 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://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));
          }

【问题讨论】：

错误总结一下，您的 VDataService 没有名为 this.yoursHeadersConfig 的属性，也没有 this.HandleError。对于 Observable 错误，您使用的是哪个版本的 rxjs？
@user184994...感谢您的回复...我使用的rxjs版本是5.5.6。您能提供解决上述三个错误的建议吗
@arar：我的回答对你有用吗？
@ShashankVivek....感谢您的帮助...对我有用...抱歉回复晚了
@arar no prob mate ;)

标签： html angular firebase firebase-realtime-database

【解决方案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
}

【讨论】：