Angular 无论何时更改，都可以获取大方框图像名称

我有一个图像输入，允许我选择多个图像

可以在框中预览图像

每次在图像之间拖动或更改框时，如何获取大框中图像的名称

组件。ts

 detectFiles(event) {

    var self = this;
    this.files = event.target.files;
    let formData = new FormData();

    if (event.target.files.length > 0) {
      var n = event.target.files[0].name;
      var t = event.target.files[0].type;
      var s = event.target.files[0].size;

      self.filename = n;
      self.fileType = t;
      self.fileSize = s;
    }

    if (this.files.length < 8) {
      for (let index = 0; index < this.files.length; index++) {

        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
          var image = new Image();
          image.src = e.target.result;
          image.onload = function () {
            self.sizeH = image.width;
            self.sizeV = image.height;
          };

        }
        formData.append('file', this.files[index]);
        reader.readAsDataURL(this.files[index]);
      }
    }
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.urls, event.previousIndex, event.currentIndex);
  }

  dropBig(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.urls, event.previousIndex, 0);
  }

检测文件（事件）{
var self=这个；
this.files=event.target.files；
设formData=new formData（）；
如果（event.target.files.length>0）{
var n=event.target.files[0].name；
var t=event.target.files[0]。类型；
var s=event.target.files[0]。大小；
self.filename=n；
self.fileType=t；
self.fileSize=s；
}
if（this.files.length<8）{
for（让index=0；index{
this.url.push（例如target.result）；
var image=新图像（）；
image.src=e.target.result；
image.onload=函数（）{
self.sizeH=image.width；
self.sizeV=image.height；
};
}
formData.append（'file'，this.files[index]）；
reader.readAsDataURL（this.files[index]）；
}
}
}
drop（事件：CdkDragDrop）{
moveItemInArray（this.url、event.previousIndex、event.currentIndex）；
}
dropBig（事件：CdkDragDrop）{
moveItemInArray（this.url，event.previousIndex，0）；
}

必须在数组中存储所有属性

而不是这些：

files:any;
sizeH:any;
sizeV:any;
filename:any;
fileType:any;
fileSize:any;

urls = new Array<string>();

在该阵列中，存储有关图像的所有信息：

const self = this;
const files = event.target.files;
const formData = new FormData();

this.items = [];
if (files.length < 8) {
    for (let index = 0; index < files.length; index++) {

        const item: any = {
            filename: event.target.files[index].name,
            fileType: event.target.files[index].type,
            fileSize: event.target.files[index].size,
        };
        this.items.push(item);

        const reader = new FileReader();
        reader.onload = (e: any) => {
            item.url = e.target.result;
            const image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                item.sizeH = image.width;
                item.sizeV = image.height;
            };

        }
        formData.append('file', files[index]);
        reader.readAsDataURL(files[index]);
    }
}

const self=this；
const files=event.target.files；
const formData=new formData（）；
此参数为.items=[]；
如果（files.length<8）{
for（让index=0；index{
item.url=e.target.result；
常量图像=新图像（）；
image.src=e.target.result；
image.onload=函数（）{
item.sizeH=image.width；
item.sizeV=image.height；
};
}
append（'file'，files[index]）；
reader.readAsDataURL（文件[索引]）；
}
}

然后需要在html模板中使用该数组

在

drop

方法中，您始终可以通过索引找到名称

---

您必须将所有这些数据存储在项目列表中。不只是存储URL，而是使用一个数组来存储图像所需的一切。@cy3er也就是说，我应该创建一个与URL数组相同的数组吗？顺便说一句，谢谢你的回复。是的，用一个包含所有属性名称、大小、类型、分辨率和url的数组替换url数组。我不想弄乱url数组，因为这是我设置图像位置的地方，也是“允许”我拖动图像的地方。如果应用此选项，图像将不会显示：（@HarryJames added stackblitz linkI没有使用数组，因为如果您先选择2个图像，然后再选择两个，我得到4个。这样，每当我选择一个新图像时，它只包含该新选择的图像。您可以按原样收集图像信息，但同时继续“添加”吗所选图像？只需删除

detectFiles

方法中的

this.items=[]；

行即可。请参阅stackblitz。非常完美，感谢您的帮助！致以最良好的问候

const self = this;
const files = event.target.files;
const formData = new FormData();

this.items = [];
if (files.length < 8) {
    for (let index = 0; index < files.length; index++) {

        const item: any = {
            filename: event.target.files[index].name,
            fileType: event.target.files[index].type,
            fileSize: event.target.files[index].size,
        };
        this.items.push(item);

        const reader = new FileReader();
        reader.onload = (e: any) => {
            item.url = e.target.result;
            const image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                item.sizeH = image.width;
                item.sizeV = image.height;
            };

        }
        formData.append('file', files[index]);
        reader.readAsDataURL(files[index]);
    }
}