博客站

在 UniApp 中，文件下载是一个常见的需求，例如下载图片、文档或其他资源。UniApp 提供了 uni.downloadFile API 来实现文件下载功能。以下是 UniApp 处理文件下载的详细步骤：

一、基本文件下载

1. 使用 uni.downloadFile

• uni.downloadFile 用于下载文件到本地临时路径。
• 示例：

  uni.downloadFile({
    url: 'https://example.com/file.pdf', // 文件地址
    success: (res) => {
      if (res.statusCode === 200) {
        console.log('文件下载成功，临时路径：', res.tempFilePath);
      }
    },
    fail: (err) => {
      console.log('文件下载失败：', err);
    }
  });
  

2. 保存文件到本地

• 下载完成后，可以使用 uni.saveFile 将文件保存到本地。
• 示例：

  uni.downloadFile({
    url: 'https://example.com/file.pdf',
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            console.log('文件保存成功，路径：', saveRes.savedFilePath);
          },
          fail: (err) => {
            console.log('文件保存失败：', err);
          }
        });
      }
    }
  });
  

二、处理下载进度

1. 监听下载进度

• 通过 progress 回调函数监听下载进度。
• 示例：

  uni.downloadFile({
    url: 'https://example.com/file.pdf',
    progress: (res) => {
      console.log('下载进度：', res.progress);
    },
    success: (res) => {
      if (res.statusCode === 200) {
        console.log('文件下载成功，临时路径：', res.tempFilePath);
      }
    }
  });
  

三、处理大文件下载

对于大文件下载，可能需要分块下载或断点续传。以下是简单的分块下载示例：

1. 分块下载

• 通过设置 Range 请求头实现分块下载。
• 示例：

  const downloadChunk = (url, start, end) => {
    return new Promise((resolve, reject) => {
      uni.request({
        url,
        header: {
          Range: `bytes=${start}-${end}`
        },
        success: (res) => resolve(res.data),
        fail: (err) => reject(err)
      });
    });
  };
  
  const downloadFile = async (url, totalSize, chunkSize) => {
    const chunks = [];
    for (let start = 0; start < totalSize; start  = chunkSize) {
      const end = Math.min(start   chunkSize - 1, totalSize - 1);
      const chunk = await downloadChunk(url, start, end);
      chunks.push(chunk);
    }
    return new Blob(chunks);
  };
  
  downloadFile('https://example.com/large-file.zip', 1024 * 1024 * 100, 1024 * 1024)
    .then((blob) => {
      console.log('文件下载完成：', blob);
    })
    .catch((err) => {
      console.log('文件下载失败：', err);
    });
  

四、处理文件类型

1. 获取文件类型

• 通过文件扩展名或 MIME 类型判断文件类型。
• 示例：

  const getFileType = (fileName) => {
    const extension = fileName.split('.').pop().toLowerCase();
    switch (extension) {
      case 'pdf':
        return 'PDF 文件';
      case 'jpg':
      case 'png':
        return '图片文件';
      default:
        return '未知文件';
    }
  };
  
  console.log(getFileType('example.pdf')); // 输出：PDF 文件
  

五、总结

UniApp 处理文件下载的步骤如下：

1. 下载文件：使用 uni.downloadFile 下载文件到临时路径。
2. 保存文件：使用 uni.saveFile 将文件保存到本地。
3. 处理下载进度：通过 progress 回调函数监听下载进度。
4. 处理大文件：通过分块下载或断点续传处理大文件。
5. 处理文件类型：通过文件扩展名或 MIME 类型判断文件类型。

以下是一个完整的文件下载示例：

uni.downloadFile({
  url: 'https://example.com/file.pdf',
  progress: (res) => {
    console.log('下载进度：', res.progress);
  },
  success: (res) => {
    if (res.statusCode === 200) {
      uni.saveFile({
        tempFilePath: res.tempFilePath,
        success: (saveRes) => {
          console.log('文件保存成功，路径：', saveRes.savedFilePath);
        },
        fail: (err) => {
          console.log('文件保存失败：', err);
        }
      });
    }
  },
  fail: (err) => {
    console.log('文件下载失败：', err);
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的文件下载功能，满足应用的需求。