Перетащите изображение с предварительным просмотром изображения в angular2 + - PullRequest
Новая
       10

Перетащите изображение с предварительным просмотром изображения в angular2 +

0 голосов
/ 24 января 2019

Вот ссылка на стек: - https://stackblitz.com/edit/angular6-ledera?file=app%2Fapp.component.ts

Я пытаюсь перетащить изображение прямо с рабочего стола и т. Д. И перетащить его в раздел.

1) получить предварительный просмотр изображения 2) получить файл объекта.

.html 

<div *ngIf="!imageDrop" class="col-12 rmpm dropzone" appDrag>
    <div class="text-wrapper">
        <div class="centered">Drop your file here!</div>
    </div>
</div>
<!--droped image preview-->
<img  *ngIf="imageDrop" [src]="imageDrop" width="100px" height="100px">

dragDrop.directive.ts 

@HostBinding("style.background") private background = "#eee";

  constructor() {}

  @HostListener("dragover", ["$event"]) public onDragOver(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this.background = "#999";
    console.log( '4444:::' + JSON.stringify(evt.target.files));
  }
  @HostListener("dragleave", ["$event"]) public onDragLeave(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this.background = "#eee";
    console.log( '222:::' + JSON.stringify(evt.target.files));
  }
  @HostListener("drop", ["$event"]) public onDrop(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    let files = evt.dataTransfer.files;
    if (files.length > 0) {
      this.background = "#eee";
      console.log( '1111:::' + JSON.stringify(files));
      console.log( '33333:::' + JSON.stringify(evt.target.files));
    }
  }

1 Ответ

0 голосов
/ 24 января 2019

Вот демоверсия Stackblitz для удаления файла.

Директива обрабатывает один или несколько файлов, удаляемых одновременно.

Вызывает событие files со списком файлов в качестве параметра, каждый файл заключен в интерфейс FileHandle, содержащий файл и SafeUrl для большого двоичного объекта, созданного с помощью window.URL.createObjectURL (файл) . 

export interface FileHandle {
  file: File,
  url: SafeUrl
}

@HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
  evt.preventDefault();
  evt.stopPropagation();
  this.background = '#eee';

  let files: FileHandle[] = [];
  for (let i = 0; i < evt.dataTransfer.files.length; i++) {
    const file = evt.dataTransfer.files[i];
    const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
    files.push({ file, url });
  }
  if (files.length > 0) {
    this.files.emit(files);
  }
}

Компонент-потребитель может затем отображать список изображений, используя URL, созданный для каждого файла. 

<div *ngFor="let file of files">
  <img *ngIf="file" [src]="file.url" width="100px" height="100px">
</div>

Надеюсь, это поможет.

...