时间戳

首页 > 解决方案 > 以角度获取图像作为文件

javascript - 以角度获取图像作为文件

问题描述

我正在使用具有图像上传选项的角度应用程序，

网页：

<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;
}

所以在点击功能上，来自的 srcevent.target被设置为this.url..

但我需要将其转换为文件。因为我需要将其作为文件发送到服务调用，所以我需要更新头像图像。

所以请帮助我将用户选择/点击的头像图像转换file/formdata为文件格式，以便它可以作为文件格式发送到服务，并且可以更新为用户选择的图像..

示例： https ://stackblitz.com/edit/angular-file-upload-preview-85v9bg

标签： javascriptangularhtmlimagetypescript

解决方案

您可以使用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()to的代码uploadPersonaImage()并uploadPersonaImage()从urlsetter调用

澄清

你明白什么event.target.src意思（考虑e为事件）吗？

  1. 这event意味着当您点击上传照片时触发的点击/更改事件。

  2. event.target表示事件发生的 DOM 元素。

  3. event.target.src将为src您提供触发更改事件的 DOM 元素的属性值。

现在，你说这行不通？不，这不是因为您单击的元素是一个，HTMLInputElement而是位于标签src下的图像下。label你打算怎么打电话uploadPersonaImage()？什么叫你的方法？你问了这么多次都没有回答。

在我上次的编辑中，我在 setter 下添加了代码url，它将转换dataUrlFile为实际的文件，这完全取决于您的服务器您希望如何存储文件。作为文件还是作为 dataUrl？如果您想将其作为文件发送，请按照我在答案中添加的转换操作，如果您想保存为 dataUrl，然后直接保存this.urlAPI 调用中的内容。

推荐阅读