Javascript 以文件形式获取图像

我正在制作带有图像上传选项的角度应用程序

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

因此，在单击函数上，来自

事件.target

的src被设置为

this.url

但我需要将其转换为文件。。因为我需要将其作为文件发送到服务呼叫，所以我需要更新化身图像

因此，请帮助我将用户选择/单击的化身图像转换为

文件/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
  }

编辑：

如果在上载文件时无法触摸选择文件（）或触发其他功能，请尝试此操作

_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（）

并从

url

setter调用

uploadPersonaImage（）

澄清

您是否理解

event.target.src

的意思（将

e

视为事件）

此处的

事件

表示您在启动时触发的单击/更改事件 点击上传照片

event.target

表示事件发生的DOM元素

event.target.src

将为您提供 触发更改事件的DOM元素

现在，你说这不管用吗？不，不会，因为您单击的元素是

HTMLInputElement

，但是

src

位于

标签下的图像下。您打算如何调用
uploadPersonaImage（）
？你的方法叫什么？你问了这么多次也没有回答

在上一次编辑中，我在
url
的setter下添加了代码，它将
dataUrlFile
转换为实际文件，这完全取决于您的服务器如何存储文件。作为文件还是作为数据URL？如果要将其作为文件发送，请按照我在回答中添加的转换进行操作如果要另存为dataUrl，请在API调用中直接保存
this.url
的内容。
角度更改事件对输入类型文件无效无法获取您的信息，但我根本不打算在此处使用输入类型文件（仅从用户的本地计算机上载）…我可以从您那里得到示例吗？我是否需要将此
uploadPersonaImage（e）{this.url=e.target.src；}
替换为您提供的内容？？？@HelloWorld是的，在
uploadPersonaImage（）下添加
uploadToServer（）的内容
，从
onSelectFile
调用它，就像我调用的
uploadToServer（）
一样，我要清楚地表明，我根本不是在与
onSelectFile（事件）
谈论任何事情，唯一的问题是需要如何在
uploadPersonaImage（e）中转换图像的帮助
到文件..@HelloWorld您不需要文件，只需将其转换为BLOB，并将FormData（如xyz所做的）发送到您的服务器我不确定你们是否在谈论同样的事情…我很快实现了xyz解决方案：
_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}`);
  }

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