这个问题在这里已有答案：
我正在将图像上传到firebase，然后尝试将其下载URL保存到ionic storage，但它给了我这个错误
Uncaught TypeError: Cannot read property 'storage' of undefined
这是我的代码：
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import * as firebase from 'firebase';
import { Storage } from '@ionic/storage';
import uuid from 'uuid/v1'; //here change 'v1' with the version you desire to use
export interface Dress {
id?: string;
title: string;
description: string;
createdAt: number;
category: string;
price: number;
city: string;
type: string;
size: string;
action: string;
image_1: string;
image_2: string;
image_3: string;
}
export interface Category {
name: string;
}
export interface City {
name: string;
}
export interface Type {
name: string;
}
export interface Size {
name: string;
}
export interface Action {
name: string;
}
@Injectable({
providedIn: 'root'
})
export class DressService {
private dressCollection: AngularFirestoreCollection<Dress>;
private dress: Observable<Dress[]>;
private categoryCollection: AngularFirestoreCollection<Category>;
private category: Observable<Category[]>;
private cityCollection: AngularFirestoreCollection<City>;
private city: Observable<City[]>;
private typeCollection: AngularFirestoreCollection<Type>;
private type: Observable<Type[]>;
private sizeCollection: AngularFirestoreCollection<Size>;
private size: Observable<Size[]>;
private actionCollection: AngularFirestoreCollection<Action>;
private action: Observable<Action[]>;
id = uuid();
constructor(db: AngularFirestore,
public storage: Storage,
) {
this.dressCollection = db.collection<Dress>('dress');
this.dress = this.dressCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
this.categoryCollection = db.collection<Category>('categories');
this.category = this.categoryCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
this.cityCollection = db.collection<City>('cities');
this.city = this.cityCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
this.typeCollection = db.collection<Type>('types');
this.type = this.typeCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
this.sizeCollection = db.collection<Size>('sizes');
this.size = this.sizeCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
this.actionCollection = db.collection<Action>('actions');
this.action = this.actionCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
}
getDresses() {
return this.dress;
}
getCategories() {
return this.category;
}
getTypes() {
return this.type;
}
getCities() {
return this.city;
}
getSizes() {
return this.size;
}
getActions() {
return this.action;
}
getDress(id) {
return this.dressCollection.doc<Dress>(id).valueChanges();
}
updateDress(dress: Dress, id: string) {
return this.dressCollection.doc(id).update(dress);
}
addDress(dress: Dress) {
return this.dressCollection.add(dress);
}
removeDress(id) {
return this.dressCollection.doc(id).delete();
}
uploadImage(img, numb) {
const ref = firebase.database().ref('Uploads');
const storage = firebase.storage();
const pathReference = storage.ref('images/' + this.id + numb + '.jpg');
const message = img;
pathReference.putString(message, 'base64', { contentType: 'image/jpg' }).then(function (snapshot) {
console.log('Uploaded a base64url string!');
pathReference.getDownloadURL().then(function (url) {
console.log(url);
console.log(typeof(url));
if (numb === 1) {
this.storage.set('image_1_url', url);
}
if (numb === 2) {
this.storage.set('image_2_url', url);
}
if (numb === 3) {
this.storage.set('image_3_url', url);
}
});
});
}
}
当我在选择图像后调用uploadImage()函数时，它已经上传并生成了URL但是无法保存它，错误来自这一行
if (numb === 1) {
this.storage.set('image_1_url', url);
}
我有适合我的firebase的配置，一切都很完美，只有当它涉及ionic storage部分时才会失败
请使用胖箭头函数代替匿名函数，因为前者不会创建自己的执行范围而后者会这样做，因此您的'this'开始指向它：
uploadImage(img, numb) {
const ref = firebase.database().ref('Uploads');
const storage = firebase.storage();
const pathReference = storage.ref('images/' + this.id + numb + '.jpg');
const message = img;
pathReference.putString(message, 'base64', { contentType: 'image/jpg' }).then(function (snapshot) {
console.log('Uploaded a base64url string!');
// see here replaced 'function()' with =>:
pathReference.getDownloadURL().then((url)=>{
console.log(url);
console.log(typeof(url));
if (numb === 1) {
this.storage.set('image_1_url', url);
}
if (numb === 2) {
this.storage.set('image_2_url', url);
}
if (numb === 3) {
this.storage.set('image_3_url', url);
}
});
});
}