使用formData以angular 8发送json格式的数据

Question

我需要通过这种格式从服务器发送数据：

{
    "name":"kianoush",
    "userName":"kia9372",
    "email":"kiadr9372@gmail.com"
}

我尝试做这项工作：

update(item:UserEditModel): Observable<any>{

    const formData: FormData = new FormData();
    for (const key in item) {
        if (item.hasOwnProperty(key)) {

            if (item[key] instanceof File) {
                formData.append(key, item[key], item[key].name);
            } else {
                formData.append(key, item[key]);
            }
        }
    }

    return this.httpClient.post(this.appConfig.apiEndpoint+'User/UpdateUser',
     formData, {
         headers:this.headers,
        reportProgress: true,
        observe: 'events'
    })
    .pipe(map(response => response || {} as HttpEvent<any>));
}

但它以这种格式发送到服务器：

     ------WebKitFormBoundaryhWmbFWpD25WdeB9n
Content-Disposition: form-data; name="firstName"

vbnvbnvb
------WebKitFormBoundaryhWmbFWpD25WdeB9n
Content-Disposition: form-data; name="lastName"

vbnvbnvn
------WebKitFormBoundaryhWmbFWpD25WdeB9n
Content-Disposition: form-data; name="userName"

vbnvbnvb
------WebKitFormBoundaryhWmbFWpD25WdeB9n
Content-Disposition: form-data; name="roleId"

但我想通过这种格式从服务器发送数据：

   {
    "name":"kianoush",
    "userName":"kia9372",
    "email":"kiadr9372@gmail.com"
  }

现在我该如何解决这个问题？？？

Answer 1

因为你有表单数据，它的格式与 JSON 不同 如果请求中没有文件，只需将表单数据转换为 JSON

或者在后端使用 [FromForm] 之前的 dto

通常，当我有一些文件应该发送到服务器时，我正在使用这种解决方案，您可以这样做

第一的：

slectedFile: File;
//imgUrl for showing it in the html tag
imgUrl = '../assets/img/profilepic.png';

第二：

form: FormGroup = this.fb.group({
   //........
   file: [null]
});

第三：

onFileSelect(file) {
    if (file.target.files[0]) {
      this.slectedFile = file.target.files[0] as File;
      const reader = new FileReader();
      reader.readAsDataURL(this.slectedFile);
      reader.onload = (event: any) => {
        this.imgUrl = event.target.result;
      };
   }
}

最后：

我认为你的主要问题在这里

  const data= new FormData();
  if (this.slectedFile) {
    data.append('file', this.slectedFile, this.slectedFile.name);
  }

我应该提到个人使用这个包作为输入

https://www.npmjs.com/package/ngx-material-file-input

在 html 方面，您只需说：

<mat-form-field class="col-md-12 ml-10 ngxmatfileinput">
    <ngx-mat-file-input
    (change)="onFileSelect($event)"
    formControlName="file"
    accept="image/*">
    </ngx-mat-file-input>
    <img [src]="imgUrl" class="float-left icon-fileupload" />
</mat-form-field>

Answer 2

如果您不发送文件，请使用以下代码

  update(item:UserEditModel): Observable<any>{

        const _data ={
        "name":"item.name",
        "userName":"item.userName",
        "email":"item.email"
    }
        return this.httpClient.post(this.appConfig.apiEndpoint+'User/UpdateUser',
         _data)
        .pipe(map(response => response || {} as HttpEvent<any>));
    }