时间戳

首页 > 解决方案 > FormGroup 的值未分配给 FormData

javascript - FormGroup 的值未分配给 FormData

问题描述

我需要将多部分数据上传到我的 api。所以我创建了一个 FormData 以便上传。首先，我获取用户输入的所有数据，如下所示：图像（文件）、类别（字符串）。数据实际上是通过模板获取的，并存储在categoryForm: FormGroup. 然后我想将值存储在FormData. 但可悲的是，当我想将有效负载上传到 api 时，它会吐出以下错误：

{"src":["No file was submitted."],"tag":["This field is required."]}

当我查看控制台时，我注意到 FormData 对象实际上是空的。所以 的值categoryForm没有重新分配给formData。我认为 categoryForm 和模板没有问题，因为当我记录它们时。我得到一个带有数据的对象，当我登录category并image单独获取数据时。所以问题一定出在我要分配categoryFormto值的部分formData。你能帮我进一步解决这个问题吗？

代码

  apiSubmit() {
      console.log(this.categoryForm.value) // returns values
      console.log(this.categoryForm.get('category').value); // returns values
      console.log(this.categoryForm.get('image').value); // returns values
      
      const formData = new FormData();
      formData.append('category', this.categoryForm.get('category').value);
      formData.append('image', this.categoryForm.get('image').value);
      console.log(formData); // doesn't return values
    
      this.http.post<any>(this.url, formData, httpOptions).subscribe(
        (res) => console.log(res),
        (err) => console.log(err)
      );
    }]

控制台日志

安慰

标签： javascriptangulartypescriptionic-frameworkmultipartform-data

解决方案

您所做的方式在该上下文中不起作用，因为append对象而不是使用构造函数FormData接受this.categoryForm.value作为参数或参数并将其分配给变量，否则您可以直接使用this.categoryForm.valuepost 方法而不是FormData

例如：

export class FormData{
   image: any;
   category: string;
  
  constructor(args){
     this.image = args.image;
     this.category = args.category;
  }
}

你可以创建一个像const formData = new FormData(this.categoryForm.value);

推荐阅读