Итак, я настроил AngularFire в своем веб-приложении Angular 6 и пытался использовать AngularFireStorage.Я правильно следовал документации и загружал изображения, как я вижу в Firebase, что изображение загружено в определенное место и с указанным файлом.Вот код:
uploadFile(e) {
const file = e.target.files[0];
const filePath = `test${this.uid}`;
const task = this.storage.upload(filePath, file);
const dlUrl = task.downloadURL();
dlUrl.subscribe((res) => {
console.log(res);
});
}
Всякий раз, когда я звоню console.log(res), он возвращает неопределенное значение.Я не получал фактический URL-адрес для загрузки от AngularFireStorage, просто всегда возвращает undefined.Я могу убедиться, что правильное изображение загружено в корзину, и даже если у него такое же имя файла, оно перезаписывает старое.Просто чтобы быть как можно более ясным, вот <input> для файла:
<input type="file" accept=".jpg,.jpeg,.png;capture=camera" (change)="uploadFile($event)">
Я не уверен, что здесь может пойти не так, как изображение успешно загружается, я получаюноль ошибок в консоли, но всегда всегда возвращается неопределенная строка.Любая помощь очень ценится, спасибо заранее!
РЕДАКТИРОВАТЬ: Для тех, кто все еще читает этот пост, я в конечном итоге просто использовал методы и пакет firebase и пропустил angularfire2 для функций хранения.Вот что я сделал вместо angularfire2/storage методов.
Я сделал метод загрузки в сервисе с BehaviorSubject<number>, чтобы передать процентную долю в мой компонент:
percentSubject: BehaviorSubject<number> = new BehaviorSubject(0);
constructor() { }
pushUpload(file) {
return new Promise((resolve, reject) => {
const storageRef = firebase.storage().ref();
const uploadRef = storageRef.child(`uploads/${file.name}`);
this.uploadTask = uploadRef.put(file);
this.uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot: firebase.storage.UploadTaskSnapshot) => {
this.percentSubject.next((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
},
(error) => {
reject(error);
},
async () => {
const u = await this.uploadTask.snapshot.ref.getDownloadURL();
resolve(u);
}
);
});
}
Это срабатывает каждый раз и возвращает правильный downloadURL с Promise.resolve.Я все еще хотел бы услышать, может ли кто-нибудь заставить методы AngularFireStorage работать, поскольку я все еще не понимаю, почему он возвращает неопределенные URL-адреса.Надеюсь, что это может помочь!
РЕДАКТИРОВАТЬ 2:
Так что после некоторого исследования и просмотра модуля angularfire2/storage я заметил, что он использует устаревшие методы firebase, которые были удалены начиная с версии5.0.0.Вот примечания к выпуску: https://firebase.google.com/support/release-notes/js
Если вы перейдете к 4.13.0, вы увидите, что FullMetadata.downloadUrls и UploadTaskSnapshot.downloadUrl устарели в пользу Reference.getDownloadUrl().Просматривая пакет angularfire2, я заметил эту строку:
downloadURL: function () { return from(task.then(function (s) { return s.downloadURL; })); }
в файле task.js и понял, что он использует старые методы, и так как я использую версию 5.0.1 firebase в своем приложении,переменная была удалена и поэтому будет возвращать неопределенное значение каждый раз.Если эта строка в файле angularfire2/storage/task.js изменяется на:
downloadURL: function () { return from(task.then(async function (s) { return await s.ref.getDownloadURL(); })); }
Возвращает правильный URL для загруженного изображения, используя Firebase 5 +.
Так что если вы хотите использовать AngularFire2для Storage ATM убедитесь, что ваша версия Firebase соотносится с версиями AngularFire2.Надеюсь, что это может решить любые проблемы!