如何在单个FormControl中具有值数组？

Question

我正在开发一个文件上传组件，可以同时从1个文件上传到多个文件。

当用户单击“选择...”时，他可以选择一个或多个要上传的文件。然后，他将预览选择上传的文件。

我的问题是关于存储在控件中的文件名，该文件名仅包含一个字符串，与用户选择上传的文件数量无关。文件名以及其他文件信息将发送到应用程序表。那么如何将每个文件名保存到一个控件中呢？

这是我的代码：

模板

<div *ngIf="config">

<section id="actionBar">
    <div>
        <label class="file-upload">
            <input
                type="file"
                multiple
                accept=".png,.jpg,.jpeg"
                [formControl]="upload"
                (change)="previewFile($event); build($event)
            "
            />
            Choose...
        </label>
    </div>
    <div>
        <!--upload btn-->
        <app-button-group
            [items]="config.buttons"
            [item]="{
                        icon: fileExtention,
                        image: previewImg,
                        name: fileName,
                        dimensions: sizeUnit
                    }"
        >
        </app-button-group>
    </div>
</section>

<section id="preview">
    <div>
        <h3>Preview</h3>
    </div>
    // single file
    <ng-container *ngIf="previewImg">
        <div>
            <h4>{{fileName}}</h4>
        </div>
        <div>
            <img [src]="previewImg" height="200" alt="Image preview...">
        </div>
    </ng-container>
    // multiple files
    <ng-container *ngIf="previewMultipleImg">
        <div>
            <h4>{{fileName}}</h4>
        </div>
        <div *ngFor="let i of previewMultipleImg">
            <img [src]="i" height="200" alt="Image preview...">
        </div>
    </ng-container>
</section>
<app-table
    [tableSchema]="config.tableSchema"
    [dataSource]="config.dataSource"
>
</app-table>

控制器

export class UploadComponent implements OnInit {
@Input() config;
@Input() schema
@Input() dataSource
upload = new FormControl('');
size: number = 0;
unit: string = "";
fileExtention: string;
fileName: string;
sizeUnit: string = `${this.size}+${this.unit}`;
icon: any;
previewImg;
previewMultipleImg;
fileList = []
multi = []

constructor() {}

ngOnInit() {}

build(event) {
    this.formatFileName();
    this.getExtention(this.fileName)
    this.getSize(event)
    this.previewFile(event)
}

formatFileName() {
    console.log(this.upload.value);
    let filename = this.upload.value.replace(/^.*\\/, "");
    return this.fileName = filename;
}

getExtention(filename) {
    this.fileExtention = filename.split(/\.(?=[^\.]+$)/).slice(-1).pop().toString();
    return this.fileExtention
}

getSize(event) {
    const size = event.srcElement.files[0].size;
    if (size < 1000) {
        this.size = size;
        this.unit = "bytes";
    } else if (size < 1000 * 1000) {
        this.size = size / 1000;
        this.unit = "kb";
    } else if (size < 1000 * 1000 * 1000) {
        this.size = size / 1000 / 1000;
        this.unit = "mb";
    } else {
        this.size = size / 1000 / 1000 / 1000;
        this.unit = "gb";
    }
    return this.sizeUnit = `${this.size}${this.unit}`
}

previewFile(event) {
    let files = event.target.files;
    if (files.length === 1) {
        let reader = new FileReader();
        const single = new Promise((res, rej) => {
            res()
        })
        single.then(res => {
            reader.readAsDataURL(files[0]);
            reader.onload = () => {
                return this.previewImg = reader.result
            }
        })
        single.catch(err => console.log(err))
    } else if (files.length > 1) {
        let x = []
        const multi = new Promise((res, rej) => {
            res(
                Object.values(files).map(e => {
                    let reader = new FileReader();
                    // @ts-ignore
                    reader.readAsDataURL(e)
                    reader.onload = () => {
                        x.push(reader.result)
                    }
                    return x
                })
            )
        });
        multi.then(res => {
            this.previewMultipleImg = res[0]
            console.log(  this.previewMultipleImg);
            return this.previewMultipleImg
        })
        multi.catch( rej => console.log(rej))
    }
}

}