Получить изображение в виде файла в угловых

Question

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

HTML:

<label class="hoverable" for="fileInput">
  <img [src]="url ? url : avatarImage"> 
  <div class="hover-text">Choose file</div>
  <div class="background"></div>
</label>
<br/>
<input id="fileInput" type='file' (change)="onSelectFile($event)">
<button *ngIf="url" (click)="delete()" >delete</button>


<img (click)="uploadPersonaImage($event)" class="avatar-images" src="https://www.w3schools.com/howto/img_avatar.png">

<img (click)="uploadPersonaImage($event)" class="avatar-images" src="https://www.w3schools.com/howto/img_avatar2.png">

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

Точно так же, если пользователь не заинтересован в обновлении изображения профиля, но заинтересован в том, чтобы выбрать любое изображение аватара согласно его / ее желанию, которое я дал,

 <img (click)="uploadPersonaImage($event)" class="avatar-images" src="https://www.w3schools.com/howto/img_avatar.png">

<img (click)="uploadPersonaImage($event)" class="avatar-images" src="https://www.w3schools.com/howto/img_avatar2.png">

А в тс сделал что то подобное,

uploadPersonaImage(e) {
  this.url = e.target.src;
}

Таким образом, для функции щелчка src из event.target был установлен на this.url ..

Но мне нужно преобразовать его в файл. Потому что мне нужно отправить его как файл для вызова службы, поэтому мне нужно обновить изображение аватара.

Поэтому, пожалуйста, помогите мне преобразовать изображение аватара, выбранное пользователем / выбранное пользователем, в file/formdata, чтобы его можно было отправлять в службу в формате файла и обновлять как выбранное пользователем изображение.

Пример: https://stackblitz.com/edit/angular-file-upload-preview-85v9bg

Answer 1

Вы можете использовать FormData , чтобы прикрепить прочитанный файл и отправить в API.

 onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {

      this.uploadToServer(event.target.files[0]);
      ... rest of the code
  }

  uploadToServer(file) {
    let formData: FormData = new FormData();
    formData.append('fileName', file);
    // call your api service to send it to server, send formData
  }

EDIT

Попробуйте, если у вас нет возможности коснуться onSelectFile() или вызвать другую функцию при загрузке файла.

_url = ''
set url(val) {
  this._url = val;
  if (val) {
    this.dataURLtoFile(val);
  }
}

get url() {
    return this._url;
}
uploadedImage: File ;

dataURLtoFile(dataurl) {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const imageExtension = mime.split('/')[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    this.uploadedImage = new File([u8arr], `uploaded.${imageExtension}`);
  }

При вызове API, возможно, когда вы нажимаете на кнопку,

uploadPersonaImage(e) {
  // this.apiService.someMethod(this.uploadedImage);
}

Если вы хотите инициировать вызов API только при загрузке изображения, добавьте код dataURLtoFile() в uploadPersonaImage() и вызовите uploadPersonaImage() из url setter

Разъяснение

Вы понимаете, что означает event.target.src (рассматривая e как событие)?

1. Здесь event означает событие нажатия / изменения, которое вы вызвали, когда вы нажал на загрузку фото.

2. event.target означает элемент DOM, для которого произошло событие.

3. event.target.src даст вам src значение атрибута Элемент DOM, для которого вы инициировали событие изменения.

Теперь, вы говорите, это не сработает? Нет, потому что элемент, который вы щелкнули, - HTMLInputElement, но src находится под изображением внутри тега label. А как вы собираетесь звонить uploadPersonaImage()? что вызывает твой метод? Вы не ответили на это даже после того, как спросили столько раз.

В моем последнем редактировании я добавил код под установщик url, который преобразует dataUrlFile в реальный файл. Это полностью зависит от вашего сервера, как вы хотите сохранить файл. Как файл или как dataUrl? Если вы хотите отправить его в виде файла, следуйте указаниям, которые я добавил в ответе, если вы хотите сохранить как dataUrl, а затем напрямую сохраните содержимое this.url в вызове API.