通过接受文件作为 Blob 并需要多部分表单数据的 API 在 Angular 中上传文件

Question

我正在构建一个用于上传文件的 Angular 表单，并且我有一个需要调用的第三方 API，它接受多部分表单数据和文件作为 blob。 你能告诉我我该怎么做吗？ 我现在有这个代码吗？

HTML

<form [formGroup]="customerFileGroup" (submit)="submit($event)">
  <div>
      <input
        formControlName="file"
        type="file"
        accept=".csv,text/plain, text/csv, text/html"
        (onSelection)="changeFile($event)"
      />
  </div>
<button>Submit</button  

</form>

打字稿

export class CustomerFile{
  constructor(private readonly _fb: FormBuilder) {}

  const customerFileGroup: FormGroup = this._fb.group({
      file: this._fb.control(null),
    });


  submit(e: Event): void {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', this.fileUploadGroup.value);
    // this.customerFileService.uploadFile(formData.file?);
    What should I send here because the API requires file as blob now

  }

文件/API

public uploadFile(
    file: Blob
  )
{
 // Black box for me

}

昂首阔步

我试图了解我需要在服务中传递什么，因此它是多部分表单数据，但文件的请求正文是一个 blob。 我正在使用 Angular 10。如果需要更多信息，请告诉我

如果我传递表单数据，我会收到以下错误：

“FormData”类型的参数不可分配给“Blob”类型的参数

Answer 1

您不应该使用ngModel或formControl来获取文件，您必须在文件更改时手动将文件存储在变量中，请参见下面的示例

<form [formGroup]="customerFileGroup" (submit)="submit($event)">
  <div>
    <input
      formControlName="file"
      type="file"
      accept=".csv,text/plain, text/csv, text/html"
      (change)="changeFile($event)" <!-- Change event name to "change" -->
    />
  </div>
  <button>Submit</button>
</form>

export class CustomerFile{
...
 fileToUpload: FileList;

 changeFile(evt) {
    this.fileToUpload = evt.target.files[0];
 }

 submit(e: Event): void {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', this.fileToUpload);
    this.customerFileService.uploadFile(formData);
 }
}

export class CustomerFileService {

 ...

   public uploadFile(payload: FormData) {
    return this.http.post('<API_URL>',payload);
   }

}