javascript - 如何在 Angular 6 中添加图像而不清除前一个图像

Question

我正在尝试第二次添加图像，但它从服务文件中清除了前一个图像。我尝试过这种方法但未能实现。这里我面临的问题是“this.fileInfo.fileUrls.push(e.目标.结果);"该行在 promise 解决后执行。所以我想编写一个等待函数？ Image Upload with preview and Delete option - Javascript / Jquery

service.ts

    async selectImageFile(event) {
      this.fileInfo = {
          selectedFiles: event.target.files,
          fileUrls: [],
          names: []
        };
        for (let i = 0; i < this.fileInfo.selectedFiles.length; i++) {
          this.fileInfo.names.push({
            file_name: this.fileInfo.selectedFiles[i].name.replace(/\s/g, "_"),
            type: "review"
          });
        }
        console.log('files Name:', this.fileInfo.names);
        const files = event.target.files;
        this.fileInfo.fileUrls = [];
        if (files) {
          for (let i=0;i<files.length;i++) {
            var f = files[i]
            const reader = new FileReader();
            reader.onload = (e: any) => {
              console.log(e.target);
              this.fileInfo.fileUrls.push(e.target.result);
            };
            reader.readAsDataURL(f);
          }
        }
        console.log(this.fileInfo);
        return this.fileInfo;
      } 

组件.ts

    selectPhoto(event) {
        console.log('event from temp',event);
        this.resturantDetailsService.selectImageFile(event).then(fileInfo => {
          console.log('retrun promise',fileInfo)
          this.selectedFiles = fileInfo.selectedFiles;
          this.fileUrls = fileInfo.fileUrls;
          // console.log(this.fileUrls);
          this.names = fileInfo.names;
        });
      }

Answer 1

像这样声明全局 fileInfo 对象

export class test{
fileInfo = {
          fileUrls: [], //here I am clearing array after async call 
          names: [] // same as above 
 };
 

每当我调用该函数 fileInfo 对象正在重新初始化时，剩下的问题都是相同的