Предварительный просмотр изображения перед загрузкой в ​​угловой 5

Question

.html

  <input type='file' onchange="readURL(this);" />
  <img id="blah" src="http://placehold.it/180" alt="your image" />

.css

img{
  max-width:180px;
}
input[type=file]{
padding:10px;
background:#2d2d2d;}

.js

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('blah').src=e.target.result
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

У меня есть этот код для отображения предварительного просмотра изображения перед его загрузкой.Однако я работаю с угловым 5, поэтому у меня есть файл .ts вместо .js.Как я могу сделать то же самое в угловых 5. Я также хочу показать изображение во всех браузерах.Пожалуйста помоги.Заранее спасибо.

Answer 1

Я знаю, что опоздал, но столкнулся с этой проблемой как для изображения, так и для звука.Вышеуказанные решения отлично работают для изображений, но не очень хорошо для аудиоВ конце концов я получил все это, используя объект URL вместо объекта FileReader, который используют все.что-то вроде следующего

файла component.ts ~

imgSrc = 'assets/path/to/default/image.jpeg'

imgFileSelected(event: any) {
  if (event.target.files && event.target.files[0]) {
    this.imgSrc = URL.createObjectURL(event.target.files[0]);
  }
}

Мой component.html выглядит как ~

<img [src]="imgSrc | sanitizeUrl"> <!-- using a Custom Pipe -->

Наконец я создал пользовательский канал, чтобы избавить консольпредупреждений.моя труба выглядит следующим образом ~

@Pipe({
  name: 'sanitizerUrl'
})
export class SanitizerUrlPipe implements PipeTransform {

  constructor (
    private sanitize: DomSanitizer
  ) {}

  transform(value: string): SafeUrl {
    return this.sanitize.bypassSecurityTrustUrl(value);
  }
}

Чтобы увидеть, как я использовал это для звукового тега, вы можете проверить эту ссылку. Это всего лишь 2 дополнительные строки кода, требующего пояснения.

Answer 2

Пожалуйста, измените как -> this.url = event.target.result;

readURL(event:any) {
    if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();

        reader.onload = (event:any) = > {
            this.url = event.target.result;
        }

        reader.readAsDataURL(event.target.files[0]);
    }
}

Answer 3

Возможно, вам просто нужно изменить javascript function на typescript, как показано ниже.

readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = (e:any) => {
             (<HTMLImageElement>document.getElementById('blah')).src=e.target.result 
             //assuming element with id blah will always be an ImageElement
        };

        reader.readAsDataURL(input.files[0]);
    }
}

Это должно быть.

Обновление

Вы также можете определить свойство и привязать его к изображению src и соответственно изменить его значение, как показано ниже:

В вашем файле .ts до constructor, определите свойство как url и установите егозначение по умолчанию http://placehold.it/180.

url: string = 'http://placehold.it/180';

Вы можете обновить это свойство в reader.onload, как показано ниже:

readURL(event:any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event:any) => {
     this.url = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

Ваш html теперь будет выглядетькак ниже:

<input type='file' (change)="readURL(this);" />
<img id="blah" [src]="url" alt="your image" />

Answer 4

Я использую приведенный ниже код для реализации предварительного просмотра изображения:

onFileChange(event: any) {
this.userFile = event.target.files[0];
this.imageSelected = this.userFile.name;
if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();
  reader.onload = (e: any) => {
    this.imageSrc = e.target.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}}

, который прекрасно работает и отображает предварительный просмотр изображения.Первоначально проблема, с которой я столкнулся, заключалась в том, что я получал указанную ниже ошибку в инструментах разработчика Chrome каждый раз, когда создается предварительный просмотр изображения:

Хотя все работало нормально, нет никаких других ошибок.

Если я нажал на ноль: 1, я был направлен на следующее:

Посленемного поигравшись и устраняя неполадки, я смог найти решение, которое я включил в редактирование ниже.

РЕДАКТИРОВАТЬ: понял это.У меня не было ||'http://placehold.it/180'" включено в [src] = "в моем component.html. Угадайте, это проблема синхронизации. Сортировка сейчас. Больше ошибок нет.

Answer 5

.html

Обновление атрибута события и параметра обработчика для ввода.И вы должны использовать привязку данных для атрибута src.Следующее применимо к src, если оно не равно null, не определено или не задано в жестком коде ('http://placehold.it/180')

<input type='file' (change)="readURL($event);" />
<img id="blah" [src]="imageSrc || 'http://placehold.it/180'" alt="your image" />

.ts

В файле (классе) компонента ts у вас должно быть свойство imageSrc, котороеиспользовать в представлении (html), и ваша функция должна быть методом этого класса

...
imageSrc: string;
...
constructor(...) {...}
...
readURL(event: Event): void {
    if (event.target.files && event.target.files[0]) {
        const file = event.target.files[0];

        const reader = new FileReader();
        reader.onload = e => this.imageSrc = reader.result;

        reader.readAsDataURL(file);
    }
}