无法通过角度6中的formdata上传文件答案

【问题标题】：can not upload file through formdata in angular 6无法通过角度6中的formdata上传文件
【发布时间】：2019-10-18 05:51:28
【问题描述】：

我正在使用 Angular 上传图片，如下面的代码所示。

从this.formGroup.value中获取文件数据，但是问题是当这个文件数据传递给formData时，发现formData仍然是空的，因此无法通过http请求发送。我不知道如何解决这个问题。有什么想法或其他方式吗？

    const formData: any = new FormData();
    formData.append("avatar", this.formGroup.value);
    console.log(formData);
    this.http.post(environment.baseUrl + '/api/users/picture',formData);

整个代码如下所示。

<form action="uploadUrl" [formGroup]="formGroup" method="post" enctype="multipart/form-data" (ngSubmit)="onSubmit()">
          <input type="file" name="avatar" />
         <button type="submit" [disabled]="formGroup.invalid || formGroup.prestine">Submit</button>

  onSubmit(){
    console.log('onSubmit',this.formGroup.value);
    const formData: any = new FormData();
    formData.append("avatar", this.formGroup.value);

    console.log(formData);   // the formData is empty


    this.http.post(environment.baseUrl + '/api/users/picture',formData); 
      .subscribe( res => {
          console.log(res);
      }, error => {
        console.log('changePicture error',error);
      });

  }

【问题讨论】：

标签： angular file-upload

【解决方案1】：

我个人是这样做的：

模板：

<input formControlName="picture" 
        (change)="onFileChange($event)"
        class="form-control" 
        type="file" 
        id="picture" 
        name="picture">

组件：

onFileChange(event) {
  const file = event.target.files[0];
  this.formData.append('avatar', file, file.name);
   this.http.post(environment.baseUrl + '/api/users/picture',this.formData); 
  .subscribe( res => {
      console.log(res);
  }, error => {
    console.log('changePicture error',error);
  });

}

我在我的 http 请求中添加标头以允许表单数据：

headersConfig['enctype'] = 'multipart/form-data';

【讨论】：

const file = event.target.files[0];让 formData = new FormData(); formData.append('头像', 文件, 文件名);控制台.log(formData);但是 formData 仍然显示： FormData {} ，这是为什么呢
这是正常行为，就这样发送吧 ;)

【解决方案2】：

我有一个相同的触发器，但我运行它：

//--------------
formData.append('file', fileInput.files[0]);

const options = {
  method: 'POST',
  body: formData,

};

fetch('your-upload-url', options);

【讨论】：