uniapp如何保存文件到本地

在uniapp中如何将文件保存到本地？我尝试使用uni.downloadFile下载文件后，不知道如何调用API将文件存储到设备本地存储中。具体想实现以下功能：

  1. 下载网络文件到手机本地
  2. 能指定存储目录（如相册或应用专属目录）
  3. 支持常见文件类型如图片、PDF等
  4. 在Android和iOS上都能正常使用 遇到的问题是保存后找不到文件位置，或者权限被拒绝。请问完整的代码实现是怎样的？是否需要配置特殊权限？
2 回复

使用uni.downloadFile下载文件，再用uni.saveFile保存到本地。注意：H5端不支持保存到手机，需用uni.saveFileToAlbum保存到相册。


在 UniApp 中保存文件到本地，可以使用 uni.downloadFile 下载文件，然后通过 uni.saveFile 保存到本地存储。以下是具体步骤和代码示例：

步骤：

  1. 下载文件：使用 uni.downloadFile 从网络下载文件到临时路径。
  2. 保存文件：使用 uni.saveFile 将临时文件保存到本地。

代码示例：

// 下载文件
uni.downloadFile({
  url: 'https://example.com/file.pdf', // 文件URL
  success: (res) => {
    if (res.statusCode === 200) {
      // 保存文件到本地
      uni.saveFile({
        tempFilePath: res.tempFilePath, // 临时文件路径
        success: (saveRes) => {
          console.log('文件保存成功：', saveRes.savedFilePath);
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('保存失败：', err);
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
      });
    }
  },
  fail: (error) => {
    console.error('下载失败：', error);
    uni.showToast({
      title: '下载失败',
      icon: 'none'
    });
  }
});

注意事项：

  • 平台差异：uni.saveFile 在部分平台（如H5）可能不支持，需使用条件编译或替代方案。
  • 文件路径：保存后的路径可通过 savedFilePath 获取，但不同平台路径格式可能不同。
  • 权限：在App端需配置存储权限（Android的WRITE_EXTERNAL_STORAGE权限）。

替代方案（H5）：

在H5环境中，可使用 URL.createObjectURL 和 a 标签触发下载：

// 仅适用于H5
const link = document.createElement('a');
link.href = 'https://example.com/file.pdf';
link.download = 'file.pdf';
link.click();

总结：

通过 uni.downloadFile 和 uni.saveFile 可实现文件保存，注意处理平台兼容性。若仅需下载而非持久保存，直接使用 uni.downloadFile 即可。

回到顶部