Ionic 2/3 URL下载图片异常：提示完成但图库无文件

我来帮你搞定这个头疼的问题！这种“提示下载成功但图库看不到”的情况在Ionic 2/3里太常见了，核心原因基本逃不开这几个：存储路径选成了应用私有目录、系统媒体库没主动刷新或者权限没配置到位。咱们一步步来排查修复：

1. 先确认你选对了存储路径 #

很多人踩坑是因为把图片存到了应用的私有目录（比如file.dataDirectory），这种目录只有你的APP能访问，系统图库是读不到的。必须存到平台的公共媒体目录：

• Android：用externalPublicDirectory('Pictures')，对应系统的「图片」文件夹
• iOS：要把文件从应用目录复制到savedPhotosDirectory（相册目录）

2. 配置必要的权限 #

不管Android还是iOS，都需要配置相应的存储/相册访问权限，不然即使下载成功也没法被图库识别。在config.xml里添加以下配置：

<!-- Android 存储权限 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<!-- iOS 相册访问权限描述 -->
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
    <string>需要访问相册来保存下载的图片</string>
</edit-config>

3. 修改下载代码，添加媒体库刷新逻辑 #

下面是修复后的完整代码，我加了平台判断、正确路径和媒体库刷新的逻辑：

import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { Platform } from 'ionic-angular';

constructor(
  private transfer: FileTransfer,
  private file: File,
  private platform: Platform
) {}

async downloadImage(imageUrl: string) {
  const fileTransfer: FileTransferObject = this.transfer.create();
  let savePath: string;
  const fileName = 'downloaded_img_' + new Date().getTime() + '.jpg'; // 用时间戳避免重名

  // 确保平台就绪后再执行
  await this.platform.ready();

  // 根据平台设置正确的保存路径
  if (this.platform.is('android')) {
    // Android 保存到公共图片目录
    savePath = this.file.externalPublicDirectory('Pictures') + fileName;
  } else if (this.platform.is('ios')) {
    // iOS 先存到应用文档目录，之后再复制到相册
    savePath = this.file.documentsDirectory + fileName;
  } else {
    console.log('当前平台不支持该功能');
    return;
  }

  try {
    // 执行下载
    const result = await fileTransfer.download(imageUrl, savePath, true);
    console.log('下载成功，文件路径：', result.nativeURL);

    // 关键步骤：通知系统媒体库刷新，让图片显示在图库中
    if (this.platform.is('android')) {
      // Android 需要调用媒体扫描器，先安装插件：ionic cordova plugin add cordova-plugin-media-scanner
      (<any>window).MediaScannerConnection.scanFile(
        [savePath],
        ['image/jpeg'],
        () => console.log('媒体库已刷新，图片可在图库中查看'),
        (error) => console.error('媒体库扫描失败：', error)
      );
    } else if (this.platform.is('ios')) {
      // iOS 需要把文件复制到相册目录
      await this.file.copyFile(
        this.file.documentsDirectory,
        fileName,
        this.file.savedPhotosDirectory,
        fileName
      );
      console.log('图片已写入系统相册');
    }

    alert('图片已成功保存到图库！');
  } catch (error) {
    console.error('下载失败：', error);
    alert('下载出错啦：' + error.message);
  }
}

4. 别忘了安装媒体扫描插件（Android专属） #

Android端要让系统识别新下载的图片，需要安装cordova-plugin-media-scanner插件，执行这个命令：

ionic cordova plugin add cordova-plugin-media-scanner

常见坑点提醒 #

• 不要用file.dataDirectory或file.applicationDirectory，这些都是私有目录，图库访问不到
• iOS必须把文件从应用目录复制到相册目录，直接存到相册目录会报错
• 测试时最好用真实设备，模拟器的图库刷新可能有延迟

内容的提问来源于stack exchange，提问作者Ali Abdulaal