javascript - 获取图像作为 Angular 文件

Question

我正在制作带有图像上传选项的 Angular 应用程序，其中具有，

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">

在 ts 中做了这样的事情，

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

因此，在点击函数中，来自 event.target 的 src 被设置为 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
  }

编辑:

如果您在上传文件时无法选择触摸 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 的 setter 下添加了代码，它将把 dataUrlFile 转换为实际的文件，这完全取决于您的服务器如何想要存储文件。作为文件还是作为 dataUrl？如果您想将其作为文件发送，请按照我在答案中添加的转换进行操作；如果您想另存为 dataUrl，则直接在 API 调用中保存 this.url 的内容。