无法上传MultiPart文件

Question

我正在开发一个角形8应用程序，该应用程序使用@aws-扩容/api库来处理对Spring后端应用程序的http请求。我试图执行一个MultiPart文件上传从角到Spring，但遇到了问题。我正在尝试使用ngx input来执行上传，这里是组件HTML 中的相关代码节表单元素。

<mat-form-field>
        <ngx-mat-file-input formControlName="pressReleaseFile" placeholder="Required input" valuePlaceholder="No file selected" required></ngx-mat-file-input>
        <mat-icon matSuffix>folder</mat-icon>
        <mat-error *ngIf="pressReleaseForm.get('pressReleaseFile').hasError('required')">
          Please select a file
        </mat-error>
        <mat-error *ngIf="pressReleaseForm.get('pressReleaseFile').hasError('maxContentSize')">
          The total size must not exceed {{pressReleaseForm.get('pressReleaseFile')?.getError('maxContentSize').maxSize | byteFormat}}
          ({{pressReleaseForm.get('pressReleaseFile')?.getError('maxContentSize').actualSize
          | byteFormat}}).
        </mat-error>
      </mat-form-field>

**组件类型记录文件中的上载方法**

public savePressRelease(): void {
    //See https://stackoverflow.com/questions/57979241/upload-file-as-multipart-form-data-from-angular-with-ngx-mat-file-input
    if (!this.isFormSubmissionValid()) {
      return;
    }

    const pressReleaseFile = this.pressReleaseForm.get('pressReleaseFile').value;
     const formData: FormData = new FormData();
     formData.append('pressReleaseFile', pressReleaseFile);
     console.log("formData");
     console.log(formData);

    this.error = null;
    this.inProgress = true;


    this.pressReleaseService.savePressReleaseRecord(formData)
      .then((savedPressRelease: PressRelease) => {
        this.inProgress = false;
        this.dialogRef.close(true);
        this.snackBar.open('Press Release Record Added.', null, { duration: 3000 });
      })
      .catch( error => {
        this.inProgress = false;
        this.error = 'There was an error saving the Press Release Record';
      });
  }

**服务方法savePressReleaseRecord **

 savePressReleaseRecord(formData: FormData): Promise<PressRelease> {
    console.log("formData pressReleaseData");
    console.log(formData);
    return API.post('serverAPI', '/pressRelease', { body: formData })
    .then(r => r as PressRelease);
  }

我注意到的一件事是打印formData的输出是一个空对象。当我在chrome developer工具中检查请求有效负载时，是否有什么是我做错的？？Spring端点的请求有效负载是空的。

我们非常感谢您对此的任何帮助。

谢谢达米恩

Answer 1

“资料”："^2.1.7"，它工作得很好。我建议您尝试查看fileInput的值，方法是使用可观察到的formControl值。

this.fileForm.get('basicfile').valueChanges.subscribe(data =>  {
  console.log(data);
});

​

​

如果您尝试获取formControl的值并在控制台中看到它，那么您就会得到这样的东西。它不是空的;)

​

​

您必须在TypeScript文件中看到API请求头

API.post('serverAPI', '/pressRelease', { body: formData })

您应该创建一个特殊的post函数，将您的表单数据发送到没有此头的后端。

'Accept': 'application/json'

如果需要的话，再加上这个

"Content-Type": "application/octet-stream",

否则，后端将把您的帖子请求的内容作为Json考虑。

Answer 2

切换到使用httpClient而不是@aws-扩容/api，文件上传现在按预期工作。