uniapp vue-cli vue2项目如何下载

如何在uniapp中使用vue-cli创建vue2项目并进行下载？需要具体的步骤和注意事项。

2 回复

使用 Vue CLI 创建 uni-app 项目：

  1. 安装 Vue CLI：npm install -g @vue/cli
  2. 创建项目：vue create -p dcloudio/uni-preset-vue my-project
  3. 选择模板（如 hello uni-app）
  4. 进入项目并运行：cd my-project && npm run dev:%PLATFORM%

在 UniApp Vue2 项目中，下载文件可以通过以下方法实现：

1. 使用 uni.downloadFile API

这是官方推荐的方法，适用于下载网络文件到本地临时路径。

uni.downloadFile({
  url: 'https://example.com/file.pdf', // 文件下载地址
  success: (res) => {
    if (res.statusCode === 200) {
      // 下载成功，文件保存在临时路径 res.tempFilePath
      console.log('文件下载成功:', res.tempFilePath);
      
      // 可选：保存到本地相册或文件系统（仅支持图片/视频）
      // uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath });
    }
  },
  fail: (err) => {
    console.error('下载失败:', err);
  }
});

2. 保存到本地（扩展功能）

下载后如需保存到设备存储：

// 保存文件到本地（支持图片/视频）
uni.saveFile({
  tempFilePath: res.tempFilePath, // 从下载回调获取的临时路径
  success: (saveRes) => {
    console.log('文件已保存:', saveRes.savedFilePath);
  }
});

// 保存图片到相册（仅图片）
uni.saveImageToPhotosAlbum({
  filePath: res.tempFilePath,
  success: () => uni.showToast({ title: '保存成功' })
});

3. 浏览器环境兼容

在 H5 端可通过创建隐藏链接触发下载：

// H5 端专用下载方法
function h5Download(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'download';
  link.click();
}

注意事项：

  1. 网络地址需配置域名白名单（manifest.json -> uni-app -> uploadFile）
  2. 安卓端保存到相册需要存储权限
  3. 使用 uni.saveFile 保存的文件可通过 uni.getSavedFileList 管理

根据实际需求选择合适方案，一般推荐优先使用 uni.downloadFile 配合保存操作。

回到顶部