Return FileReader 上 reader.result 的字符串值

Question

我一直在尝试 return reader.onloadend 中的一个字符串，但它让我 return 使用我的整个功能。

我的函数如下：

uploadFile() {
      let vm = this;
      var file = vm.$refs["testeLogo"].files[0];
      var reader = new FileReader();
      reader.onloadend = function() {
        console.log(reader.result); // returns me a string base64
        document.querySelector("#supe").setAttribute("src", this.imagem);
        return reader.result;
      };
      reader.readAsDataURL(file);
    }

如何以正确的方式 return 字符串的值，因为它保持 returning 我自己的函数而不是打印在 [= 上的 reader.result 21=]

Answer 1

假设您正在开发 Vue 应用程序（如果没有请告诉我）：

只需在模板中的任意位置使用 imageBase64 变量，加载文件后它就会更新。

data () {
  return {
    imageBase64: ''
  }
},

methods: {
  uploadFile() {
    let vm = this;
    var file = vm.$refs["testeLogo"].files[0];
    var reader = new FileReader();

    reader.onloadend = function() {
      document.querySelector("#supe").setAttribute("src", this.imagem);
      
      vm.imageBase64 = reader.result
    };

    reader.readAsDataURL(file);
  }
}

另外记得不要直接用Vue查询DOM，可以直接绑定imagem变量到img src属性：

<img :src="imagem" alt="" />

Return FileReader 上 reader.result 的字符串值

Return string value of reader.result on FileReader

javascript

base64

image

function

vue.js