时间戳

首页 > 解决方案 > 在 Vuejs 方法中的 Javascript 中分配转换后的 `Base64` 值

javascript - 在 Vuejs 方法中的 Javascript 中分配转换后的 `Base64` 值

问题描述

我正在尝试从我的应用程序的input字段中检索文件信息。我有一个渲染函数，它可以渲染输入字段，并在输入时调用一个函数，代码如下：type="file"Vuejs

input: (event) => {
    var reader = new FileReader()
    reader.readAsDataURL(event.target.files[0])
    let baseFile = ''
    reader.onload = function () {
        baseFile = reader.result
        console.log(baseFile)
    };
    console.log(baseFile)
    const docs = {
        name: event.target.files[0].name,
        size: event.target.files[0].size,
        lastModifiedDate: event.target.files[0].lastModifiedDate,
        base64: baseFile
    }
    this.$emit('input', docs)
}

当我console.log在我的reader.onload函数中运行这个函数时，我会得到转换后的文件，但是当我在它之外进行控制台时，该值只是一个空字符串。我如何检索并分配给我的const docs变量。帮我解决这个问题。谢谢。

标签： javascriptvue.jsvuejs2

解决方案

我建议在将其更改为箭头函数后将其余代码放入该函数的块中，如下所示：

input: (event) => {
  var reader = new FileReader()
  reader.readAsDataURL(event.target.files[0])
  let baseFile = ''
  reader.onload = () => {// <------ use arrow function
    baseFile = reader.result
    const docs = {
      name: event.target.files[0].name,
      size: event.target.files[0].size,
      lastModifiedDate: event.target.files[0].lastModifiedDate,
      base64: baseFile
    }
    this.$emit('input', docs)
  };


}

推荐阅读