Question

我正在尝试使用UI的Angular 6和API的Lumen构建文件上传系统。当我直接将API与Postman一起使用时，文件上传工作正常。但它不适用于Angular UI。我正在使用FormData来处理上传，但是API为我要上传的文件返回了一个空值。

HTML：

<input type="file" name="document" (change)="onFileChanged($event.target.files)">

角度代码：

public onFileChanged(files: any): void {
    var file = files[0];
    var fd = new FormData();
    fd.append('document', file);
    this.documentService
        .uploadDocument(this.id, fd)
        .subscribe(
            () => {
                console.log('success');
            },
            () => {
                console.log('failure');
            }
        );
}

Answer 1

好，我发现了问题！

这是因为我使用的拦截器向每个请求添加了JSON标头，因此它将所有内容都转换为JSON，这显然是行不通的。所以我只是删除了该标头即可使用。

Answer 2

我在项目中使用了表格数据。看一下我的代码，它可能对您有帮助

       uploadFile(data, index) {
          const formData: FormData = new FormData();
          console.log('formData', formData);

          formData.append('data', this.tableData.caseId);
          formData.append('file', data.filedata);
          this.dashService.uploadAttachment(formData, this.encodedData)
            .subscribe(
              (respData) => {
                this.filesArray.splice(index, 1);
              },
              respError => {
                console.log('respError', respError);
              }
            );
        }
        removeFile(index) {
          this.filesArray.splice(index, 1);
        }

以下是代码中使用的服务。

     uploadAttachment(data, encodedData) {
        return this._http.post(this._url + 'cases/attachment', data, {
          headers: {
            // 'Content-Type': 'multipart/form-data',
            'Accept': 'application/json',
            'Authorization': encodedData
          }
        });
      }

我在服务中使用的内容类型遇到了问题。因此，我已对其进行注释，并且我的代码工作正常。

在Angular 6中使用FormData上传文件时出现问题

2 个答案: