Angular 选择要添加的其他文件时保留文件

我有一个功能来添加图像和预览它们。我选择了3张图片，这3张图片会显示出来，但如果你试图再插入一张图片，那三张上传的图片就会消失，只有我当时上传的图片才可见

有没有办法增加图像？也就是说，如果我添加了3个图像，然后想添加另一个图像，我得到的是4个，而不是1个

我该怎么做

Html

<div class="drop">

      <ng-container *ngIf="urls.length > 0">
          <img [src]="urls[0]"><span class="delete" style="cursor: pointer;" (click)="deleteImage(urls[0])"><img src="./assets/cruz.svg"></span>
        </ng-container>
        <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
    </div>

    <div class="row">

      <div class="Upcard" *ngFor="let url of urls | slice:1">
          <img [src]="url"><span class="delete" style="cursor: pointer;" (click)="deleteImage(url)"><img src="./assets/cruz.svg"></span>
      </div>
    </div>

组件

files:any;

   urls = new Array<string>();
  detectFiles(event) {
    this.urls = [];
    this.files = event.target.files;
    if (this.files.length < 7 ) {

      for (let file of this.files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }

        reader.readAsDataURL(file);    
      }
    }   
  }

files:any;

   urls = new Array<string>();
  detectFiles(event) {
    //this.urls = [];
    this.files = event.target.files;
    if (this.files.length < 7 ) {

      for (let file of this.files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }

        reader.readAsDataURL(file);    
      }
    }   
  }

文件：任意；
URL=新数组（）；
检测文件（事件）{
this.url=[]；
this.files=event.target.files；
if（this.files.length<7）{
for（让此.files的文件）{
let reader=new FileReader（）；
reader.onload=（e:any）=>{
this.url.push（例如target.result）；
}
reader.readAsDataURL（文件）；
}
}   
}

每次调用detectFiles函数（选择新图像）时，您都在初始化URL数组

只需删除这一行：this.url=[]

组件

files:any;

   urls = new Array<string>();
  detectFiles(event) {
    this.urls = [];
    this.files = event.target.files;
    if (this.files.length < 7 ) {

      for (let file of this.files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }

        reader.readAsDataURL(file);    
      }
    }   
  }

files:any;

   urls = new Array<string>();
  detectFiles(event) {
    //this.urls = [];
    this.files = event.target.files;
    if (this.files.length < 7 ) {

      for (let file of this.files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }

        reader.readAsDataURL(file);    
      }
    }   
  }

文件：任意；
URL=新数组（）；
检测文件（事件）{
//this.url=[]；
this.files=event.target.files；
if（this.files.length<7）{
for（让此.files的文件）{
let reader=new FileReader（）；
reader.onload=（e:any）=>{
this.url.push（例如target.result）；
}
reader.readAsDataURL（文件）；
}
}   
}

每次调用detectFiles函数（选择新图像）时，您都在初始化URL数组

只需删除这一行：this.url=[]

组件

files:any;

   urls = new Array<string>();
  detectFiles(event) {
    this.urls = [];
    this.files = event.target.files;
    if (this.files.length < 7 ) {

      for (let file of this.files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }

        reader.readAsDataURL(file);    
      }
    }   
  }

files:any;

   urls = new Array<string>();
  detectFiles(event) {
    //this.urls = [];
    this.files = event.target.files;
    if (this.files.length < 7 ) {

      for (let file of this.files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }

        reader.readAsDataURL(file);    
      }
    }   
  }

文件：任意；
URL=新数组（）；
检测文件（事件）{
//this.url=[]；
this.files=event.target.files；
if（this.files.length<7）{
for（让此.files的文件）{
let reader=new FileReader（）；
reader.onload=（e:any）=>{
this.url.push（例如target.result）；
}
reader.readAsDataURL（文件）；
}
}   
}

这里的问题如上面的“Z.bolbol”所述。

---

了解范围。URL数组应在全局或根级别声明。它位于lexial作用域，使得URL数组在每次点击该方法时都会启动。

这里的问题如上面的“Z.bolbol”所述。

---

了解范围。URL数组应在全局或根级别声明。您可以在lexial scope上找到它，它使URL数组在您每次点击该方法时都可以启动。

谢谢您的帮助！谢谢你帮我！顺致敬意，