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

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

角度|图像从多个来源上传到单个阵列

1 个答案: