Question

实现了选择图像并在框中预览图像的功能。

目标是使它们可拖动以便对其进行排序。

我的问题是，当选择多个图像时，它会在一个小盒子中重复出现一个大盒子图像，您能删除吗？

目标是选择3张图像并预览3张图像，然后，如果要将图像从小盒子拖到大盒子，我会更改它们的位置。

html

<div class="drop">
      <div class="cont" *ngIf="urls.length === 0">
        <div class="browse" >
            Upload files
          </div>
        <div class="desc">
          Click to upload
        </div>       
      </div>
      <div *ngIf="urls.length > 0" cdkDropList  (cdkDropListDropped)="drop($event)">
          <img [src]="urls[0]" cdkDrag>
        </div>
        <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
    </div>

    <div class="row" cdkDropList  (cdkDropListDropped)="drop($event)">
      <div class="Upcard" *ngFor="let url of urls" cdkDrag>
          <img [src]="url">
      </div>
    </div>

组件.ts

files:any;
  urls = new Array<string>();
  detectFiles(event) {
    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);
      }
    }
  }

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

Answer 1

解决方案是首先制作图像，然后在下拉列表中设置相同的div：

html：

<div class="drop" *ngIf="urls.length === 0">
  <div class="cont">
    <div class="browse">
      Upload files
    </div>
    <div class="desc">
      Click to upload
    </div>
  </div>
  <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>


<div cdkDropList (cdkDropListDropped)="drop($event)">
  <div *ngFor="let url of urls; let i = index">
    <div *ngIf="i === 0" class="drop">
      <img [src]="url" cdkDrag>
      <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
    </div>
    <div class="Upcard" *ngIf="i !== 0">
      <img [src]="url">
    </div>
  </div>
</div>

ts：

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

Stackblitz

Answer 2

因此，每次您尝试将图像放入大盒子或第一个小盒子中时，图像都会设置为大盒子。要解决此问题，您需要在 Html 端创建指向 urls 的索引，并使用 ngIf 指令检查索引是否不等于0。

喜欢

<div class="drop">
  <div class="cont" *ngIf="urls.length === 0">
    <div class="browse" >
        Upload files
      </div>
    <div class="desc">
      Click to upload
    </div>       
  </div>
  <div *ngIf="urls.length > 0" cdkDropList  (cdkDropListDropped)="drop($event)">
      <img [src]="urls[0]" cdkDrag>
    </div>
    <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>

<div class="row" cdkDropList  (cdkDropListDropped)="drop($event)">
<div *ngFor="let url of urls; let i = index">
  <div *ngIf="i !== 0" class="Upcard" cdkDrag>
  <img [src]="url">
</div>

角度材质拖放-重复主框图像

2 个答案: