uniapp 文件下载如何实现

在uniapp中如何实现文件下载功能？我在开发过程中需要下载服务器上的PDF和图片文件到用户手机本地，试过uni.downloadFile但保存路径不生效。求完整代码示例，包括权限请求和保存到指定目录（如Android的Download文件夹）的具体实现方法。另外如何处理iOS和Android的路径差异问题？

2 回复

在uniapp中，文件下载可使用uni.downloadFile方法。示例代码：

uni.downloadFile({
  url: '文件链接',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功');
    }
  }
});

注意：下载的文件会保存到临时路径，如需保存到相册或本地，需调用uni.saveFile或uni.saveImageToPhotosAlbum。


在 UniApp 中实现文件下载主要通过 uni.downloadFile API 完成。以下是具体实现步骤和示例代码：

实现步骤

  1. 调用下载接口：使用 uni.downloadFile 下载文件到本地临时路径。
  2. 保存文件：通过 uni.saveFile 将临时文件保存到本地持久存储（可选）。
  3. 打开文件：使用 uni.openDocument 打开文件（支持预览格式如 PDF、图片等）。

示例代码

// 下载文件示例
uni.downloadFile({
  url: 'https://example.com/file.pdf', // 文件下载链接
  success: (res) => {
    if (res.statusCode === 200) {
      // 下载成功，res.tempFilePath 为临时文件路径
      uni.saveFile({
        tempFilePath: res.tempFilePath,
        success: (saveRes) => {
          // 保存成功，saveRes.savedFilePath 为持久存储路径
          uni.showToast({ title: '下载成功', icon: 'success' });
          
          // 打开文件（如PDF）
          uni.openDocument({
            filePath: saveRes.savedFilePath,
            success: () => console.log('打开文件成功')
          });
        },
        fail: (err) => {
          uni.showToast({ title: '保存失败', icon: 'none' });
        }
      });
    }
  },
  fail: (error) => {
    uni.showToast({ title: '下载失败', icon: 'none' });
  }
});

注意事项

  • 网络权限：确保 manifest.json 中配置了网络请求权限。
  • 文件格式：uni.openDocument 支持常见格式（PDF、Word、Excel 等），但依赖设备自带应用。
  • 临时与持久存储：下载文件默认为临时路径，应用关闭后可能被清理，需通过 saveFile 持久化。
  • 路径处理：H5 平台可能需处理跨域问题，App 端需注意文件存储权限。

扩展场景

  • 进度显示：可通过 onProgressUpdate 监听下载进度（仅 App 端支持）。
  • 多文件下载：循环调用 downloadFile，注意并发限制。

以上代码和步骤可满足大部分下载需求，根据实际平台调整兼容性处理。

回到顶部