uniapp 文件流如何实现下载和上传功能

在uniapp中如何通过文件流实现下载和上传功能？具体需要调用哪些API？前端代码和后端接口该如何配合？能否提供一个完整的示例代码，包括处理文件流的细节和错误处理？

2 回复

uniapp中，文件下载用uni.downloadFile，上传用uni.uploadFile。下载后可用uni.saveFile保存到本地，上传时需指定服务器地址和文件路径。注意处理回调函数和权限配置。


在 UniApp 中，文件流的上传和下载功能主要通过 API 实现。以下是具体方法：

文件下载

使用 uni.downloadFile 下载文件，再通过 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);
        }
      });
    }
  },
  fail: (error) => {
    console.error('下载失败：', error);
  }
});

文件上传

使用 uni.uploadFile 上传文件，支持从本地选择文件。

// 选择文件
uni.chooseFile({
  count: 1,
  success: (chooseRes) => {
    const tempFile = chooseRes.tempFiles[0];
    // 上传文件
    uni.uploadFile({
      url: 'https://example.com/upload', // 服务器地址
      filePath: tempFile.path,
      name: 'file', // 后端接收的字段名
      formData: { // 附加数据
        'user': 'test'
      },
      success: (uploadRes) => {
        console.log('上传成功：', uploadRes.data);
        uni.showToast({ title: '上传成功' });
      },
      fail: (err) => {
        console.error('上传失败：', err);
      }
    });
  }
});

注意事项

  1. 下载文件：

    • 需在 manifest.json 中配置网络请求权限。
    • 部分平台（如 iOS）保存路径受限，可用 uni.openDocument 直接打开文件。

  2. 上传文件：

    • 确保服务器支持文件接收（如 multipart/form-data）。
    • H5 平台可能受浏览器限制，需测试兼容性。

扩展功能

  • 进度监听：在 downloadFile 和 uploadFile 中添加 progress 回调。
  • 大文件处理：分片上传需自行实现逻辑。

以上方法覆盖了基本场景，根据实际需求调整参数即可。

回到顶部