0

我有一个输入字段来接受图像

输入框是这样的

<input  type="file"  id="photo" accept="image/*" required  @change="UploadPhoto" />

此输入字段在 vuejs 的模板中。我使用的 vue 版本是 3。

我在上传图片时调用了 UploadPhoto() 方法。

我正在尝试将图像编码为 base64

 UploadPhoto() {

  const file = document.querySelector('#photo').files[0];
  const reader = new FileReader();
 
  reader.addEventListener("load", function () {
    
    this.photo=reader.result;    
  //On console.log(this.photo)  here shows base46 encoded value
  
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
 
    console.log('Base 64 of the Upload Photo'+ this.photo);//On console.log(this.photo)  here doesnot shows base46 encoded value instead shows as null
  
  
}
,

我已将数据中的照片初始化为空白字符串。

在 addEventListner() 函数内的 console.log(this.photo) 上显示 base46 编码值

在 addEventListner() 函数之外的 console.log(this.photo) 上，base46 编码值显示为空白

如何将 addEventListner() 函数中的 baseencode 图像传递到外部范围，即 this.photo

上传照片后，我将 this.photo 设为 null .Base64 的图像，即

4

1 回答 1

-1

这似乎是异步调用的问题。事件侦听器不会立即触发，并且您似乎console.log在触发侦听器之前运行，从而产生file' 值null。

最简单的方法是在侦听器中对您的文件执行必要的操作，或者从您的侦听器调用方法来执行此操作。

如果这不可能，您可以创建一个全局变量来存储您的文件，但您需要等待它被填充才能使用它。

此页面可以阐明您的问题： 如何在 addEventListner 方法之外访问变量值？

于 2022-02-28T14:46:24.007 回答