FormGroup 的值未分配给 FormData

Question

我需要将多部分数据上传到我的 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)
      );
    }]

控制台日志

Answer 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);

这样的对象

Answer 2

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

for (formData.values() 的变量值) { console.log(值); }

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

离子中的大多数相机原生插件 returns 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 字符串，一切都应该工作。

FormGroup 的值未分配给 FormData

Values of FormGroup are not assigned to FormData

javascript

multipartform-data

typescript

ionic-framework

angular