问题描述
我正在使用Firebase,将图像存储在我的Firebase存储中,然后在视图上显示这些图像,每个图像都有一个按钮,即当用户按下按钮下载图像时,我该怎么做?,到目前为止,我还无法找到使用角度的方法,我在图像对象上存储了 downloadUrl
,该存储库是我上载图像并希望使用该URL时消防存储提供的 downloadUrl
下载图片
I´m working with firebase, im storing images on my firebase storage and then displaying those images on the view, each image has a button that the idea is when the user press the button download the image, how can i do it, so far i haven´t been able to find i way to do this using angular, on the image object i store the downloadUrl
that fire storage give when i upload the image and i want to use that URL to download the image
组件
<div class="wrapper-gallery" id="photos_container">
<div class="mix col-xs-12 col-sm-4 col-md-3 item-photo" *ngFor="let photo of couplePhotos | async | sortByFavorites: sortBy | sortByTime: sortBy">
<div class="photo">
<img class="img-fluid" src="{{photo.data.photo_url}}" alt="{{photo.data.name}}">
<button class="delete" (click)="deletePhoto(photo.id, photo.data.name)"><span class="icon-cross"></span></button>
<a class="search zoom" data-fancybox="wedding" href="{{photo.data.photo_url}}"><span class="icon-search"></span></a>
<button class="star" [ngClass]="{'start-on': photo.data.favorite == true}" (click)="toggleFavorite(photo.id, photo)"><span class="icon-star-full"></span></button>
<button class="download" (click)="downloadImg()"><span class="icon-download"></span></button>
<a [href]="photo.data.photo_url" download></a>
</div>
</div>
</div>
推荐答案
以防万一其他人在这里发布了相同的问题,到目前为止,这是使用Firebase存储实现此目的的最佳方法.函数 userSettings
中的字符串只是一个字符串(当前用户登录名的ID),而 filename
是要从Firebase存储下载的文件的名称
Just in case some else have the same problem here i post the answer, so far this is the best way to make this using the firebase storage. in the function userSettings
is just a string (id of the current user login) and filename
is the name of the file to download from the firebase storage
下载功能
public downloadFile(userSettings: string, filename): void {
this.storageRef.ref().child(`weddingDreamPhotos/${userSettings}/${filename}`)
.getDownloadURL().then((url) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = (event) => {
/* Create a new Blob object using the response
* data of the onload object.
*/
const blob = new Blob([xhr.response], { type: 'image/jpg' });
const a: any = document.createElement('a');
a.style = 'display: none';
document.body.appendChild(a);
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
};
xhr.open('GET', url);
xhr.send();
}).catch(function(error) {
// Handle any errors
console.log(error);
});
}
这篇关于从URL下载Angular 4文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!