Угловой |загрузка изображения из нескольких источников в один массив

Question

У меня проблема с загрузкой изображений из нескольких источников для функции sing, и мне нужно вставить массив и нажать на http-сервер. В разных разделах страницы загружено почти 8 изображений, и я должен вставить каждый из них в один массив и отправил его на сервер. Вот код:

url1;
url2;
element: HTMLImageElement;
fileArray: any[];

readUrl(event: any, number) {
    alert("1");
    console.log('readUrl');
    if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();
        reader.onload = (event: any) => {
            console.log('imgurl' + number);
            document.getElementById('imgurl' + number).src = event.target.result;
            let tsnString = (document.getElementById("tsn_list") as HTMLTextAreaElement).value;
            this.fileArray[number] = event.target.result;
            console.log(this.fileArray);
        }
        reader.readAsDataURL(event.target.files[0]);
    }
}

<div class="openBase" *ngIf="aadhar==true">
    <div class="upload_data">
        <div class="upload">
            <div class="center_image">
                <div class="image-upload">
                    <label for="file-input">
                        <img *ngIf="!url1==true" id="imgurl1" height="60" src="/assets/images/upload.png">
                        <img *ngIf="!url1==false" [src]="url1" height="60">
                    </label>
                    <input id="file-input" type="file" (change)="readUrl($event,'1')" />
                </div>
                <h6 *ngIf="!url1==true" class="font_u">
                    Upload Front</h6>
                <br>
            </div>
        </div>
        <div class="upload">
            <div class="center_image">
                <div class="image-upload">
                    <label for="file-input-1">
                        <img *ngIf="!url2==true" id="imgurl2" height="60" src="/assets/images/upload.png">
                        <!-- <input  type='file' (change)="readUrl2($event)"> -->
                        <input type='file' id="file-input-1" (change)="readUrl($event,'2')">
                </div>
                <h6 *ngIf="!url2==true" class="font_u">
                    Upload Back</h6>
                <br>
            </div>
        </div>
    </div>
</div>

Мне нужно загрузить изображение в массив и отправить его на сервер.

Answer 1

используя один объект, мы можем сделать это

var obj={}; //Declare globally
var obj_name = any+number;
obj.obj_name = event.target.files[0];

перед отправкой его на сервер, преобразовать массив в формат данных форума.

var data = new FormData();
for ( var key in obj) {
    data.append(key, obj[key]);
}

затем передать эти данные на сервер, используяajax.

внося соответствующие изменения, вы можете делать это и в массиве.