上传到AngularFireStore后，无法从getDownloadUrl()内部访问变量

Question

我已经成功地将图像上传到了我的firebase存储中，但我也想检索下载URL并将其添加到我的firestore数据库中。控制台日志记录"；URL"；返回我想要的链接。但我在使用它时遇到了问题。

我试过了this.profileImage = URL但控制台将始终返回错误。无法设置未定义的属性"profileImage"。我通过在构造函数上面写profileImage来定义它。

我也尝试过将整个firestore函数放在里面，但控制台将返回undefined的无法读取属性"firestore"。我正在使用Ionic 5。

imageRef.getDownloadURL().then((url)=> {
this.firestore.collection('users').doc(this.user.id).update({image.url})
console.log("this is my image" + url)
})

这就是我目前拥有的

uploadImage(imageURI) {
return new Promise<any>((resolve, reject) => {
let storageRef = firebase.storage().ref();
const imageRef = storageRef.child('image').child(this.createFileName());
this.encodeImageUri(imageURI, function (image64) {
imageRef.putString(image64, 'data_url')
.then(function (snapshot) {
console.log(snapshot)
resolve(snapshot.downloadURL)
imageRef.getDownloadURL().then((url)=> {
this.profileImage = url
console.log(this.profileImage)
console.log("this is my image" + url)
})
}, err => {
reject(err);
})
})
})
}

encodeImageUri(imageUri, callback) {
var c = document.createElement('canvas');
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function () {
var aux: any = this;
c.width = aux.width;
c.height = aux.height;
ctx.drawImage(img, 0, 0);
var dataURL = c.toDataURL("image/jpeg");
callback(dataURL);
};
img.src = imageUri;
};

Answer 1

如果您使用的是；正常的"；函数，而不是箭头函数；此上下文"；。

箭头函数和"箭头"函数之间的区别；正常的"；功能：https://stackoverflow.com/a/34361380/11592273

uploadImage(imageURI) {
return new Promise<any>((resolve, reject) => {
let storageRef = firebase.storage().ref();
const imageRef = storageRef.child('image').child(this.createFileName());
// replaced with an arrow function
this.encodeImageUri(imageURI, (image64) => {
imageRef.putString(image64, 'data_url')
// replaced with an arrow function
.then((snapshot) => {
console.log(snapshot)
imageRef.getDownloadURL().then((url)=> {
this.profileImage = url
console.log(this.profileImage)
console.log("this is my image" + url)
// call the resolve method after all async tasks are complteded.
resolve(snapshot.downloadURL)
})
}, err => {
reject(err);
})
})
})
}

此外，我建议使用wait/async，而不是then/catch。

async uploadImage(imageURI) {
const storageRef = firebase.storage().ref();
const imageRef = storageRef.child('image').child(this.createFileName());
const image64 = await this.encodeImageUri(imageURI);
const snapshot = await imageRef.putString(image64, 'data_url');
const url = imageRef.getDownloadURL();
this.profileImage = url;
return snapshot.downloadURL;
}