时间戳

首页 > 解决方案 > 角 | 图像从多个源上传到单个数组

javascript - 角 | 图像从多个源上传到单个数组

问题描述

我在从多个源上传图像到唱歌功能时遇到问题，必须插入数组并推送到 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>

我需要上传数组中的图像并将其发送到服务器。

标签： javascriptangular6image-uploading

解决方案

使用单个对象我们可以做到这一点

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 将此数据传递给服务器。

通过进行适当的更改，您也可以在数组中进行。

推荐阅读