Как можно загрузить изображение с помощью тега ввода в компонент angular?

Question

Я определил один компонент и хочу загрузить в него изображение, используя тег ввода. Изображение должно быть видно как правильное изображение, а не просто как загрузка файла. Также я хочу, чтобы это изображение было перетаскиваемым, т.е. я могу расположить его в любом месте на странице. Как я могу сделать это, используя angular?

Answer 1

Добавьте html ваш вклад. Я использую matbutton для замены загрузки по умолчанию.

    <div>
        <button mat-stroked-button type="button" (click)="filePicker.click()">Pick Image</button>
        <input type="file" hidden #filePicker (change)="onImagePicked($event)">
    </div>
    <div class="image-preview" *ngIf="imagePreview !== '' && imagePreview">
        <img [src]="imagePreview" [alt]="form.value.title">
    </div>

ts file

form: FormGroup;//in case you are using form
imagePreview: string; 

onImagePicked(event: Event){
  const file = (event.target as HTMLInputElement).files[0];
  this.form.patchValue({image: file});
  const reader = new FileReader();
  reader.onload = () => {
    this.imagePreview = reader.result as string;
  };
  reader.readAsDataURL(file);
}

Answer 2

Вы можете использовать следующее решение.

uploadFile(event){   
let elem = event.target; 
if(elem.files.length > 0){    
  let formData = new FormData();  
  formData.append('myfile', elem.files[0]); 
  this.fileService.sendFile(formData).subscribe(
    (response) => {
      //response code
console.log(response);
    });
}

Более подробную информацию можно найти здесь