如何将图像按角度存储在数组中？

Question

我有一个简单的表格，其中包含文件控件，我希望允许用户从单个文件输入控件中选择多个图像。当用户选择图像文件时，它会显示在他面前，但问题是我无法将这些图像存储在数组中。为此，我尝试了以下方法：

postad.component.html

<form #adPosForm="ngForm" (ngSubmit)="postAd()">
                <div class="dashboard-wrapper">
                  <div class="form-group mb-3">
                    <label class="control-label">Title</label>
                    <input class="form-control input-md" name="Title" placeholder="Title" type="text" [(ngModel)]="postAdform.title">
                  </div>
                  <div class="form-group mb-3 tg-inputwithicon">
                    <label class="control-label">Categories</label>
                    <div class="tg-select form-control">
                      <select (change)="getSubcatList($event)" name="cat">
                        <option value="" selected>Select</option>
                        <option *ngFor="let cat of categoryList | keyvalue" value="{{ cat.value.id }}">{{
                          cat.value.name }}</option>
                      </select>
                    </div>
                  </div>

                  <div class="form-group mb-3 tg-inputwithicon">
                    <label class="control-label">Sub Category</label>
                    <div class="tg-select form-control">
                      <select (change)="getSubCatId($event)" name="sub_cat">
                        <option value="" selected>Select</option>
                        <option *ngFor="let subcat of subCategoryList | keyvalue" value="{{ subcat.value.id }}">{{
                          subcat.value.name }}</option>
                      </select>
                    </div>
                  </div>
                  <label class="tg-fileuploadlabel" for="tg-photogallery">
                    <span>Drop files anywhere to upload</span>
                    <span>Or</span>
                    <span class="btn btn-common">Select Files</span>
                    <span>Maximum upload file size: 500 KB</span>
                    <input id="tg-photogallery" class="tg-fileinput" type="file" name="file" (change)="preview($event, imageList)"
                      [(ngModel)]="postAdform.file" multiple>
                  </label>
                  <div #imageList>
                  </div>

                </div>
                <div class="form-group mb-3 pull-right">
                  <button type="submit" class="btn btn-common">Post</button>
                </div>
              </form>

postad.component.ts

import { Component, OnInit } from '@angular/core';
import { MandiService } from "../mandi.service";
import { Router } from '@angular/router';

@Component({
  selector: 'app-postad',
  templateUrl: './postad.component.html',
  styleUrls: ['./postad.component.css']
})
export class PostadComponent implements OnInit {

  public subCategoryList;
  public categoryList;

  constructor(private _MS:MandiService, private router:Router) { }
  public url_getSubCat = this._MS.getBaseUrl() + 'api/get-sub-category';
  public catId;
  public sub_catId;
  public postAdform  = {
    'title': null,
    'cat' : null,
    'sub_cat': null,
    'file': null
  };
  getSubcatList(event) {    
    var xmlhttp = new XMLHttpRequest();
    this.catId = event.target.value;
    xmlhttp.onreadystatechange = () =>{
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        this.subCategoryList = JSON.parse( xmlhttp.responseText); 
          }
      }
      xmlhttp.open('GET', this._MS.getBaseUrl() + 'api/get-sub-category/' + this.catId, true);
      xmlhttp.send();   
  }  
  getSubCatId(event) {
    this.sub_catId = event.target.value;
  }

  getCategory() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = () =>{
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        this.categoryList = JSON.parse( xmlhttp.responseText); 
        console.log(this.categoryList);                   
          }
      }
      xmlhttp.open('GET', this._MS.getBaseUrl() + 'api/get-category', true);
      xmlhttp.send();
  }
  public imgaeFile:any = [];
  preview(event, imageList) {
    let imgLen =event.target.files.length;
    if(imgLen > 0) {
      for (let i = 0; i< imgLen; i++) {
        let parentDiv = document.createElement('div');
        parentDiv.setAttribute('class','profile-userpic');
        let firstLinkTag = document.createElement('a');       
        let myImage = new Image(100, 100);        
        myImage.src = URL.createObjectURL(event.target.files[i]);
        this.imgaeFile[i] = event.target.files[i];
        console.log(this.imgaeFile);
        firstLinkTag.appendChild(myImage);
        parentDiv.appendChild(firstLinkTag);
        imageList.appendChild(parentDiv);
        var childDiv  = document.createElement('div');
        childDiv.setAttribute('class', 'edit');
        var secondLinkTag = document.createElement('a');
        var newcontentsecondLinkTag = document.createTextNode("Remove");
        secondLinkTag.appendChild(newcontentsecondLinkTag);
        childDiv.appendChild(secondLinkTag);
        parentDiv.appendChild(childDiv); 

      }
    }  
    /*
    <div class="profile-userpic">
      <a href=""><img src=" http://placehold.it/150x150" class="img-responsive" alt="" title="" onclick="del()"></a>
      <div class="edit"> <a href="">Edit</a></div>
    </div>
    */


    /*

    }
    */
  }


  public postadServerResponse;
  postAd() {
    var userDetail = this._MS.getUserInfo();
    var userId = userDetail.id;
    console.log(userId);
    var _form = new FormData();    
    _form.append('title', this.postAdform.title)    
    _form.append('cat', this.catId)
    _form.append('sub_cat', this.sub_catId )
    _form.append('file', this.imgaeFile);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = () =>{
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        this.postadServerResponse = ( xmlhttp.responseText); 
        //console.log(this.postadServerResponse); 
        console.log(this.imgaeFile);                  
          }
      }
      xmlhttp.open('POST', 'http://localhost/file_upload.php', true);
      xmlhttp.send(_form);
  }

  public userInfo = { };
  ngOnInit() {
    this.getCategory()
  }

}
export class caster {}

Answer 1

哦，我有一个小错误需要替换 this.imgaeFile.push（event.target.files）中的 this.imgaeFile [i] = event.target.files [i] [i]）;