在Angular + Mongo + Spring App中通过反应式表单表单生成器发送选择的多个图像的路径数组不起作用

问题描述

im玩了一点，在这个应用程序中，im只是尝试创建一个Post（我做了），但是其中一项是我在创建Post时选择的多个图像的路径数组，挣扎了很多，但是找不到路！ 我在fron上所做的是： 首先创建HTML模板，让我上传文件

      <form [formGroup]="postCreation">
        
        <div class="form-group">
          <label>Upload Images</label>
          <input multiple="true" formControlName="imagesPost" type="file" id="imagesPost" class="form-control-file"
            id="exampleFormControlFile1" #imagesupload  (change)="selectImgs($event) ">
        </div>

       <button type="button" (click)="createPost()" [disabled]="!postCreation.valid">Create New Post</button>

      </form>

仅通过文件阅读器和Form Builder设置组件上的十个，即可设置检索所选图像的过程：

import { PostServicesService } from './../../services/post-services.service';
import { PostModel } from './../../models/postmodel';
import { Component,ElementRef,OnInit,ViewChild } from '@angular/core';
import {  FormArray,FormBuilder,FormControl,FormGroup,Validators,} from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-post',templateUrl: './post.component.html',styleUrls: ['./post.component.css'],})
export class PostComponent implements OnInit {
  
  postCreation: FormGroup;

  myimages:FormArray;

  postToCreate = new PostModel();(THIS MODEL WOULD BE AN OBJECT LIKE {images:any[]}

  @ViewChild('imagesupload',{ static: true }) input: ElementRef;

  imgsSelected: any;
 

  constructor(
    private formBuilder: FormBuilder,private postService: PostServicesService,private router: Router
  ) {}

  ngOnInit(): void {
    this.initPostForm();
  }INITIALIZING FORM BUILDER FUNCTION 

  initPostForm() {
      imagesPost:new FormControl(Array.from['']),//PRETENDING TO GET THE ARRAY OF IMAGES FROM MY REACTIVE FORM
    });
  }//FORM BUILDER FUNCTION 
 
  async selectImgs(event: any) {
    if (event.target.files && event.target.files[0]) {
      const imageReader = await new FileReader();
      imageReader.onload = async (imgCharger: any) =>
        await imageReader.readAsDataURL(event.target.files);
      this.imgsSelected = await event.target.files;
       console.log(this.imgsSelected);
      console.log(this.postToCreate.images);

    } else {
      this.imgsSelected = await null;
    }
  }//PROCESS OF RETRIEVE AND READ IMAGES URL

  setPost() {
     this.postToCreate.images = this.postCreation.get('imagesPost').value;
  }//RETRIEVING THE DATA FROM FORM BUILDER 

  async createPost() {
    await this.setPost();
    await this.postService
      .createNewPost(this.postToCreate)
      .subscribe((result: any) => {
        console.log('post created ',result);
        if (!result.error) {
          this.router.navigate(['/']);
        }
      });
  }//CREATING THE POST
}

然后，当我执行任务时，反应形式不会带给我所有选定的图像路径，而是带给我一个字符串格式的图像路径，而不是那些字符串的数组，这让我无法创建帖子。

这里选择了2张图像：

然后是一个错误，并且还证明只有一个图像路径作为单个字符串检索，但不在数组内部

有关我如何改善这种情况的任何帮助？。在此先感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）