无法将从 reader.result 获取的字符串分配给变量，返回 null

Question

我有以下代码

在读取器中返回一个字符串。Onload函数，但当我console.log图像时为空。外部函数

中的Url编辑:这是完整的代码

export default {
data() {
return {
item: {
image: null
},
imageUrl: null,
};
},
methods: {,
uploadImage(e) {
let image = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = function(){
this.imageUrl = reader.result
console.log(this.imageUrl)
// this.setImageOne(this.imageUrl)
}
console.log(this.imageUrl)

},

编辑:

固定它。谢谢大家

Answer 1

事情并没有按照你期望的顺序发生。

这是它们发生的顺序:

1. uploadImage()称为
2. 第二个console.log运行并且imageUrl为null(回调函数为onload事件注册)
3. onload回调运行，imageUrl设置

function(){
this.imageUrl = reader.result
console.log(this.imageUrl)
// this.setImageOne(this.imageUrl)
}

该函数定义时不运行。Js只在onload事件发生时运行你提供的回调函数。它注册这个回调，然后继续到console.log。

如果你想使用imageUrl的值，你应该在回调函数中这样做。