uni-app 文件下载

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 文件下载

文件切片与合并流程

例如，我有一个20M的文件（文件1），使用Python脚本以二进制模式打开，并将其每5M分割为多个部分，生成的文件名为文件1_part0001、文件1_part0002、文件1_part0003和文件1_part0004。这些切片文件被上传至Gitee，并返回每个文件的上传结果。这些结果将被追加到一个结果文件中，最后该结果文件会被上传到GitHub，通过GitHub Pages可访问此文件。

在UniApp端，需要实现一个下载页面。当用户填写结果文件的链接后，UniApp会解析并提取所有切片文件的下载地址，同时进行下载。下载完成后，将所有切片文件以二进制模式打开并合并成原始文件。

例如，Python端上传切片文件后生成的链接为：

https://beidewu.github.io/pan/KSbVHw9v.html

在JavaScript中定义文件切片列表如下：

var filelist = [
    'https://gitee.com/xiaobie/pan/raw/master/KSbVHw9v规则之树_part0001.exe',
    'https://gitee.com/xiaobie/pan/raw/master/KSbVHw9v规则之树_part0002.exe'
];

UniApp端应解析并下载所有切片文件，全部下载完成后将所有切片文件合并成原始文件完成下载。


Harmonyos Next教程
2 回复

可以做 专业插件开发 q 1196097915 主页 https://ask.dcloud.net.cn/question/91948


在uni-app中实现文件下载功能，可以通过调用原生的文件管理系统接口或者利用第三方库来完成。下面是一个使用uni-app原生API实现文件下载的示例代码。

1. 引入必要的模块

首先，在页面的<script>标签中引入必要的模块，如uni.request用于发起网络请求，uni.saveFile用于保存文件。

<script>
export default {
  data() {
    return {
      fileURL: 'https://example.com/path/to/your/file.zip' // 替换为你的文件URL
    };
  },
  methods: {
    // 下载文件的方法
    downloadFile() {
      const that = this;
      
      // 使用uni.request下载文件
      uni.request({
        url: that.fileURL,
        method: 'GET',
        responseType: 'arraybuffer', // 必须设置为arraybuffer以接收二进制数据
        success: (res) => {
          if (res.statusCode === 200) {
            // 文件下载成功，保存文件
            const fileContent = res.data;
            const tempFilePath = `${wx.env.USER_DATA_PATH}/file.zip`; // 临时文件路径，可以自定义

            // 使用uni.saveFile保存文件
            uni.saveFile({
              tempFilePath: tempFilePath,
              data: fileContent,
              success: (saveRes) => {
                console.log('文件保存成功：', saveRes.savedFilePath);
                // 这里可以添加打开文件或提示用户文件已下载的逻辑
                uni.showToast({
                  title: '文件下载成功',
                  icon: 'success'
                });
              },
              fail: (err) => {
                console.error('文件保存失败：', err);
                uni.showToast({
                  title: '文件下载失败',
                  icon: 'none'
                });
              }
            });
          } else {
            console.error('文件下载失败，状态码：', res.statusCode);
            uni.showToast({
              title: '文件下载失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('文件请求失败：', err);
          uni.showToast({
            title: '文件请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

2. 触发下载

在页面的某个按钮点击事件中调用downloadFile方法，触发文件下载。

<template>
  <view>
    <button @click="downloadFile">下载文件</button>
  </view>
</template>

注意事项

  1. 跨域问题：确保文件URL允许跨域访问，否则下载请求会被浏览器拦截。
  2. 文件类型：示例中下载的是.zip文件，可以根据需要修改文件类型和路径。
  3. 权限问题：在保存文件时，需要确保应用有写入存储的权限，特别是在小程序中。

通过上述代码，你可以在uni-app中实现基本的文件下载功能。根据实际需求，可以进一步扩展和优化代码。

回到顶部