Angular图片预览增量添加问题：如何保留已有图片实现多图累加

嘿，我一眼就瞅出问题所在了——你每次调用detectFiles方法时，第一行就把this.urls数组清空了（this.urls = []），这直接导致之前选中的图片预览URL全被抹掉，新选的图片自然就把旧的覆盖了！

修改方案 #

只需要调整你的Component代码，移除清空数组的语句，同时加上总数量限制的判断，确保不会超过你设定的上限（看起来你最多想允许6张图片）：

files: any;
urls = new Array<string>();
detectFiles(event) {
  this.files = event.target.files;
  // 计算还能添加多少张图片（总上限设为6张）
  const remainingSlots = 6 - this.urls.length;
  
  // 只有当新选的图片数量不超过剩余额度时才处理
  if (this.files.length <= remainingSlots) {
    for (let file of this.files) {
      let reader = new FileReader();
      reader.onload = (e: any) => {
        this.urls.push(e.target.result);
      }
      reader.readAsDataURL(file);
    }
  } else {
    // 可选：给用户一个提示，告知剩余可添加数量
    alert(`最多只能上传6张图片，还可以添加${remainingSlots}张！`);
  }
}

关键改动说明 #

• 移除this.urls = []：保留原有已上传图片的预览URL，实现增量添加
• 新增剩余数量校验：避免总图片数超过你预设的上限（对应你原代码里files.length <7的逻辑，这里调整为总数量不超过6）
• 保留文件读取逻辑：还是用FileReader将图片转为DataURL，实现预览

另外，确保你的deleteImage方法是正确移除对应URL的，比如：

deleteImage(url: string) {
  this.urls = this.urls.filter(item => item !== url);
}

这样调整后，你先选3张图片，再选1张，urls数组就会从3个元素变成4个，页面也会正确显示所有4张预览图啦～

内容的提问来源于stack exchange，提问作者user12247846