Vue将图片转为base64

Question

我想将本地图片转base64。 reader.readAsDataURL 不起作用。我总是得到 rawImg var 的未定义。文件 var 的值是我尝试上传的文件中的元数据。

HTML:

<input
  type="file"
  accept="image/jpeg/*"
  @change="uploadImage()"
/>

JS:

uploadImage() {
  const file = document.querySelector('input[type=file]').files[0]
  const reader = new FileReader()

  const rawImg = reader.readAsDataURL(file)
  console.log(file)
  console.log(rawImg)
}

Answer 1

如果您直接从 readAsDataURL 设置图像，将无法正常工作，returns undefined 始终如此。相反，使用 onloadend 事件：

const file = document.querySelector('input[type=file]').files[0]
const reader = new FileReader()

let rawImg;
reader.onloadend = () => {
   rawImg = reader.result;
   console.log(rawImg);
}
reader.readAsDataURL(file);
console.log(file)

Vue将图片转为base64

Vue convert image into base64

html

javascript

base64

image

vue.js