Javascript Angular 8-使用form builder上载多个图像数组

我有一个不同领域的产品形式，如产品名称，描述等。。还有一组图像

产品形式 产品名称产品描述

产品纯度产品商品

图像（添加）

复选框1图像1

复选框2图像2

复选框3图像3

我可以在我的数据库中保存产品名称、产品描述和其他字段，但不知道如何上传这些图像。因为图像是在单击“添加”按钮时创建的，根据需要可能有一个或多个图像。我使用form builder创建了表单。给我下面的代码

模板：

<form  class="kt-form kt-form--group-seperator-dashed" [formGroup]="mmgForm">
    <div class="kt-form__section kt-form__section--first">
        <div class="kt-form__group">
            <div class="row">
                <label class="col-lg-2 col-form-label">Product Name:</label>
                <div class="col-lg-4">
                    <mat-form-field class="example-full-width">
                        <input formControlName="prod_name" matInput placeholder="Enter product name" [ngClass]="{ 'is-invalid': submitted && mmgForm.controls['prod_name'].errors }">
                        <div *ngIf="submitted && mmgForm.controls['prod_name'].errors" class="invalid-feedback cls-formErr">
                            <div *ngIf="mmgForm.controls['prod_name'].errors.required">Product name is required</div>
                        </div>
                    </mat-form-field>
                </div>
                <label class="col-lg-2 col-form-label">Product description:</label>
                <div class="col-lg-4">
                    <mat-form-field class="example-full-width">
                        <textarea formControlName="prod_description" matInput placeholder="Enter product description" rows="5" [ngClass]="{ 'is-invalid': submitted && mmgForm.controls['prod_description'].errors }"></textarea>
                        <div *ngIf="submitted && mmgForm.controls['prod_description'].errors" class="invalid-feedback cls-formErr">
                            <div *ngIf="mmgForm.controls['prod_description'].errors.required">Product description is required</div>
                        </div>
                    </mat-form-field>
                </div>
            </div>
        </div>
        <div class="product_images">
            <div class="imageHeading">
                <p>
                    Images &nbsp; (<button mat-icon-button color="primary" matTooltip="Add product" (click) = addImage()><mat-icon>add_circle</mat-icon></button>)
                </p>
            </div>
            <div class="kt-form__group">
                <div class="row">
                    <div class="col-lg-1 imageLabel">#</div>
                    <div class="col-lg-2 imageLabel">Main Image</div>
                    <div class="col-lg-3 imageLabel">Choose Image</div>
                    <div class="col-lg-2 imageLabel">Image</div>
                    <div class="col-lg-2 imageLabel">Actions</div>
                </div>
            </div>
            <div class="imagesContainer">
                <div class="kt-form__group image-container container-1" *ngFor="let image of images; index as i">
                    <div class="row">
                        <div class="col-lg-1">{{ i+1 }}</div>
                        <div class="col-lg-2"><input type="checkbox" /></div>
                        <div class="col-lg-3"><input type="file" accept="image/*" (change)="imagePreview($event, image)" /></div>
                        <div class="col-lg-2"><img [src]="image.url.imgUrl" class="prod_image" /></div>
                        <div class="col-lg-2">
                            <button mat-icon-button color="warn" matTooltip="Delete Product" type="button" (click)="deleteImage(i)">
                                <mat-icon>delete</mat-icon>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

产品名称：
产品名称是必需的
产品说明：
需要产品说明

图像（添加_圈）

#
主图像
选择图像
形象
行动
{{i+1}}
删除

Ts文件：

// Angular
import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
// Material
import { SelectionModel } from '@angular/cdk/collections';
import { MatPaginator, MatSort, MatSnackBar, MatDialog, MatRadioButton } from '@angular/material';
import { ProductManagementService } from '../../../../../core/e-commerce/_services/product-management.service';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'kt-product-edit',
  templateUrl: './product-edit.component.html',
  styleUrls: ['./product-edit.component.scss'],
})
export class ProductEditComponent implements OnInit {

    mmgForm : any;
    fileData: File = null;
    previewUrl : any = "/assets/media/images/noimage.jpg"; 
    images : any = [];

    constructor(
    private products: ProductManagementService,
    private router: Router,
    private route: ActivatedRoute,
    private toastr: ToastrService,
    private cdr: ChangeDetectorRef,
    private FB: FormBuilder,
    ) {

    }

  ngOnInit() {
    this.createForm();
    this.addImage();
  }

  createForm() {
      this.mmgForm = this.FB.group({
      prod_name: ['', Validators.required],
      prod_description: ['', Validators.required]
    });
  }

  /**
     * Form Submit
     */
    submit() {
        if (this.mmgForm.invalid) {
          console.log(this.mmgForm);
          return;
        }
        const controls = this.mmgForm.controls;

        var form_values = {
          prod_name: controls.prod_name.value,
          prod_description: controls.prod_description.value,
        }
        this.products
          .createProduct(JSON.stringify(form_values)).subscribe(  //Calling Service
        (data) => {
          console.log(data);
        },
        error => {

        }
      );
    }

  imagePreview(fileInput: any, image) {
    this.fileData = <File>fileInput.target.files[0];
    // Show preview 
    var mimeType = this.fileData.type;
    if (mimeType.match(/image\/*/) == null) {
      return;
    }
    var reader = new FileReader();      
    reader.readAsDataURL(this.fileData); 
    reader.onload = (_event) => { 
    image.url.imgUrl = reader.result; 
    this.cdr.markForCheck();
    }
  }

  addImage(){
    let url = {imgUrl : this.previewUrl}
    this.images.push({url});
  }
  deleteImage(index: number) {
    this.images.splice(index, 1)
  }
}

//角度
从“@angular/core”导入{Component、OnInit、ElementRef、ViewChild、ChangeDetectionStrategy、OnDestroy、ChangeDetectorRef}；
从'@angular/Router'导入{ActivatedRoute，Router}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
//材料
从'@angular/cdk/collections'导入{SelectionModel}；
从“@angular/material”导入{MatPaginator、MatSort、matnackbar、MatDialog、MatRadioButton}；
从“../../../../core/e-commerce/_services/product management.service”导入{ProductManagementService}；
从“ngx-toastr”导入{ToastrService}；
@组成部分({
选择器：“kt产品编辑”，
templateUrl:'./product edit.component.html'，
样式URL:['./product edit.component.scss']，
})
导出类ProductEditComponent实现OnInit{
MMG形式：任何；
fileData:File=null；
previewUrl:any=“/assets/media/images/noimage.jpg”；
图像：any=[]；
建造师(
私人产品：产品管理服务，
专用路由器：路由器，
专用路由：激活的路由，
私人toastr:ToastrService，
私人cdr:ChangeDetectorRef，
私人FB:FormBuilder，
) {
}
恩戈尼尼特（）{
这个.createForm（）；
这是addImage（）；
}
createForm（）{
this.mmgForm=this.FB.group({
产品名称：[''，验证器。必需]，
产品描述：[''，验证器。必填]
});
}
/**
*提交表格
*/
提交（）{
if（this.mmgForm.invalid）{
console.log（this.mmgForm）；
返回；
}
const controls=this.mmgForm.controls；
变量形式_值={
产品名称：controls.prod\u name.value，
产品描述：controls.prod\u description.value，
}
这是我们的产品
.createProduct（JSON.stringify（form_value））.subscribe（//调用服务
（数据）=>{
控制台日志（数据）；
},
错误=>{
}
);
}
图像预览（文件输入：任意，图像）{
this.fileData=fileInput.target.files[0]；
//显示预览
var mimeType=this.fileData.type；
if（mimeType.match（/image\/*/）==null）{
返回；
}
var reader=new FileReader（）；
reader.readAsDataURL（this.fileData）；
reader.onload=（\u事件）=>{
image.url.imgUrl=reader.result；
this.cdr.markForCheck（）；
}
}
addImage（）{
让url={imgUrl:this.previewUrl}
this.images.push（{url}）；
}
deleteImage（索引：编号）{
此.images.splice（索引，1）
}
}

我建议为此创建一个

FileUploadService

服务方式：

上传文件（数组文件）：可观察{
const url=`your upload url`；
const formData:formData=new formData（）；
用于（文件中的文件）{
formData.append（'file'，file，file.name）；
}
返回this.http.post（url，formData/*{headers，如果需要}*/）；
}

您的component.ts：

//[..]
Array<File> files = [];

onFileInputEvent(event: any) {
  for(let i = 0; i < event.srcElement.files.length; i++) {
    this.fileName = event.srcElement.files[0].name;
    this.files.push(event.srcElement.files[0]);
  }
}

uploadFiles(){
  this.fileUploadService.uploadFile(this.file).subscribe(res => { // do something}, err =>{});
}

/[…]
数组文件=[]；
onFileInputEvent（事件：任意）{
for（设i=0；i{//do something}，err=>{}）；
}

您的component.html：

使用更漂亮的输入编辑

添加图像
{{fileName}}
取消

我认为你应该明确你的任务，这很难理解@马克斯：我已经编辑了我的问题。基本上，它是一个包含图像数组的表单，不知道如何使用angular将这些图像上传到服务器。您是否将图像作为文件或字节码？