I have the following code
It returns a string when in the reader.onload function but null when i console.log image.Url in the outer function
EDIT: This is the full code
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)
},
EDIT:
Fixed it. Thanks everyone
Things aren't happening in the order you expect.
This is the order they are happening:
function(){
this.imageUrl = reader.result
console.log(this.imageUrl)
// this.setImageOne(this.imageUrl)
}
This function is not run when it is defined. Js only runs the callback function you provide when the onload event happens. It registers this callback and then continues on to the console.log.
If you want to use the value of imageUrl you should do that in the callback function.