Angular

Question

我正在开发一个 Angular 8 应用程序，该应用程序使用 @aws-amplify/api 库来向 Spring 启动后端应用程序发出 http rest 请求。我正在尝试执行从 Angular 到 Spring 引导的多部分文件上传，但运行出现问题。我正在尝试使用 ngx-material-file-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 
    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 开发人员工具中检查请求负载时 - Spring 引导端点的请求负载为空

非常感谢任何帮助

谢谢达米恩

Answer 1

daterangepicker-material": "^2.1.7",` 它工作正常。我建议您尝试通过订阅 formControl 的可观察值更改来查看 fileInput 的值。

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

之后，如果您尝试获取 formControl 的值并在控制台中查看它，您将得到这样的东西。它不是空的 ;)

您必须在 TypeScript 文件

中看到您的 API 请求 header

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

你应该创建一个特殊的 post 函数来将你的表单数据发送到后端而不需要这个 header

'Accept': 'application/json'

必要时添加这个

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

否则您的后端会将您的 post 请求的内容视为 Json

Answer 2

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

Angular - 无法上传多部分文件

Angular - Unable to Upload MultiPart file

file-upload

multipartform-data

angular8