FormGroup 的值未分配给 FormData答案

【问题标题】：Values of FormGroup are not assigned to FormDataFormGroup 的值未分配给 FormData
【发布时间】：2020-07-29 14:09:23
【问题描述】：

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

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

当我查看控制台时，我注意到 FormData 对象实际上是空的。所以categoryForm 的值没有重新分配给formData。我认为 categoryForm 和模板没有问题，因为当我记录它们时。我得到一个带有数据的对象，当我分别记录category 和image 时，我得到了数据。所以问题一定出在我想将categoryForm的值分配给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)
      );
    }]

控制台日志

【问题讨论】：

是console.log(this.categoryForm.get('image').value)的输出；在控制台日志中？
@Vinay 是的，它实际上是“你好”下面的日志。它的文件日志。 “你好”是类别日志。
为什么要在 ZoneAwarePromise 中获取文件数据？你不能像那样访问 Promise 中的数据。

标签： javascript angular typescript ionic-framework multipartform-data

【解决方案1】：

由于append 到对象而不是使用FormData 的构造函数，您所做的方式在该上下文中将不起作用，该构造函数接受this.categoryForm.value 作为参数或参数并将其分配给变量，否则您可以直接用this.categoryForm.value一个post方法代替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);这样的对象

【讨论】：

您能否粘贴您的解决方案，或者您认为它将如何工作到我上面的代码 sn-p 中。我真的不明白我应该如何实施你的提议。
你需要以这样一种方式设计你的课程，以便你需要某种格式的数据
当我想实现它时，这给了我一个错误：（像那样？：constructor( args, private router: Router, private http: HttpClient) { this.image = args.image; this.category = args.category }
不要在组件构造函数中包含这个方法，这种方法适用于普通的 oops 模式创建类并为其分配值，或者说创建对象
感谢它的工作。 formData 现在填充了信息。遗憾的是，api 仍然说没有提交任何内容，但我认为这是我的 api 调用错误。

【解决方案2】：

我在使用表单数据上传图片时遇到了类似的问题。首先，您可以使用名为“serialize”的 npm 包将对象转换为表单数据，而不必一直编写“追加”。要将表单数据值记录到控制台，您可以使用...

for (var value of formData.values()) { console.log(value); }

根据我的经验，将图像上传到 ionic 上的服务器的最佳方式是使用“base64”编码字符串。所以我建议你修改你的后端以接受'base64'编码的字符串。

ionic 中的大多数相机原生插件要么返回 FILE_URI 要么返回 BASE64。

例如，使用相机原生插件。

按照文档，运行安装 ionic camera native

openGallery() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    };

    this.camera.getPicture(options).then((imageData) => {
     const base64Image = 'data:image/jpeg;base64,' + imageData;
     console.log(base64Image);
     this.categoryForm.value.image = base64Image;
    }, (err) => {
     console.log(err);
    });
  }

有了这个和你的后端设置接受 base64 字符串，一切都应该工作。

【讨论】：