Angular ngx-img-cropper: Как мне получить имя файла загруженного изображения?

Question

Я использую ngx-img-cropper, https://github.com/web-dave/ngx-img-cropper. Как мне получить имя файла, который я загружаю в свое приложение? Это мой HTML-код.

<img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>

У меня есть переменные с именем data: any и cropper: ImageCropperComponent, но ImageCropperComponent не имеет атрибута имени файла.

Если я посмотрю на страницу github ngx-img-cropper, src / imageCropperComponent.ts действительно получит файл в методе fileChangeListener ($ event: any), но у меня нет доступа к локальной переменной файла внутри этот метод.

Answer 1

Попробуйте это в вашем компоненте, это не должно изменить компонент поведение.

...

@ViewChild('cropper') myCopper: ImageCropperComponent;

ngAfterViewInit() {
  if(this.myCopper) {
    const olfOnFileChange = this.myCopper.fileChangeListener.bind(this.myCopper);
    this.myCopper.fileChangeListener = (event) => {
       if ($event.target.files.length === 0) return;
       // here should be your file name
       let fileName: File = $event.target.files[0].name; 
    olfOnFileChange(event);


  }
}

...

Существует также другая функция setImage, вы также можете изменить это. в зависимости от того, что вы хотите сделать с именем файла. Или вы можете просто установить его на свой компонент и использовать как есть.

Answer 2

Это не связано с кадрированием, это связано с тем, как вы обрабатываете загрузку вашего файла.Вот как вы можете получить имя файла после загрузки.Конечно, адаптируйте его к вашему случаю, создав функцию в вашем компоненте и связав Angular ваш ввод с этой функцией (change событие)

displayName = (files) => {
  const file = files.item(0);
  console.log('File name is', file.name);
}

<input type="file" onchange="displayName(this.files)">