Ionic3应用使用Firebase存储URL下载图片至相册失败的解决方法

我之前做Ionic项目时也碰到过类似的情况，核心问题主要出在URL格式错误和插件对带鉴权参数的URL处理上，下面给你几个可行的解决方案：

先排查最基础的问题：URL转义字符错误 #

你当前的URL里用了&，这是HTML转义后的&符号，但Android端的photoLibrary插件没法正确解析这个转义字符，导致请求时参数被截断，最终只拿到了token部分。先把URL里的&替换成原始的&试试：

download() {
  // 把&替换成&，修复URL参数格式
  let url = 'https://firebasestorage.googleapis.com/v0/b/myapp.appspot.com/o/1.jpg?alt=media&token=ea450d47-b12c-4bcc-9e35-c2aba22bc155';
  const album = 'MyAppName';
  
  this.photoLibrary.saveImage(url, album).then((entry) => {
    console.log('download complete: ' + entry.photoURL);
    this.presentToast('download complete:' + entry.photoURL);
    this.loader.dismiss();
  }, (error) => {
    this.presentToast(error);
    this.loader.dismiss();
  });
}

推荐方案：用Firebase SDK生成正确的下载URL #

手动拼接URL很容易出错，建议直接用Firebase Storage SDK来生成带有效token的下载URL，这样能避免格式问题，还能确保token的有效性：

首先确保你已经引入了AngularFireStorage，然后修改代码如下：

import { AngularFireStorage } from '@angular/fire/storage';

// 在构造函数中注入AngularFireStorage
constructor(private storage: AngularFireStorage) {}

download() {
  const album = 'MyAppName';
  // 这里填Firebase存储桶里的图片相对路径，比如'1.jpg'
  const storageRef = this.storage.ref('1.jpg');
  
  storageRef.getDownloadURL().subscribe((validUrl) => {
    // 这里拿到的是Firebase自动生成的正确下载地址
    this.photoLibrary.saveImage(validUrl, album).then((entry) => {
      console.log('download complete: ' + entry.photoURL);
      this.presentToast('download complete:' + entry.photoURL);
      this.loader.dismiss();
    }, (error) => {
      this.presentToast(`下载失败：${error.message}`);
      this.loader.dismiss();
    });
  }, (err) => {
    this.presentToast(`获取下载链接失败：${err.message}`);
    this.loader.dismiss();
  });
}

备选方案：先下载为Blob再保存 #

如果photoLibrary插件对带鉴权的URL支持还是有问题，可以先通过HTTP请求把图片下载成Blob，再转成base64格式保存到相册：

import { HttpClient } from '@angular/common/http';

// 注入HttpClient
constructor(private http: HttpClient) {}

download() {
  const album = 'MyAppName';
  const url = 'https://firebasestorage.googleapis.com/v0/b/myapp.appspot.com/o/1.jpg?alt=media&token=ea450d47-b12c-4bcc-9e35-c2aba22bc155';
  
  // 请求图片并获取Blob格式
  this.http.get(url, { responseType: 'blob' }).subscribe((imageBlob) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      // 把Blob转成base64字符串
      const base64Image = reader.result as string;
      // 用base64格式保存到相册
      this.photoLibrary.saveImage(base64Image, album, {
        fileName: '1.jpg',
        contentType: 'image/jpeg'
      }).then((entry) => {
        console.log('download complete: ' + entry.photoURL);
        this.presentToast('download complete:' + entry.photoURL);
        this.loader.dismiss();
      }, (error) => {
        this.presentToast(`保存失败：${error.message}`);
        this.loader.dismiss();
      });
    };
    reader.readAsDataURL(imageBlob);
  }, (error) => {
    this.presentToast(`下载Blob失败：${error.message}`);
    this.loader.dismiss();
  });
}

额外要检查的点 #

1. Android存储权限：确保你的App已经申请了读写存储的权限，在config.xml里添加：

   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   

   针对Android 6.0+，还需要在代码中动态申请权限。
2. Firebase存储安全规则：确认你的Firebase存储规则允许当前用户读取该图片，否则即使URL正确也会返回403错误。

内容的提问来源于stack exchange，提问作者pdm LVW