uni-app文件上传的接口对接与进度监控方案-uni-app-PHP中文网

uni-app文件上传的接口对接与进度监控方案

尼克

发布： 2025-07-11 08:48:03

原创

425人浏览过

在uni-app中实现文件上传需使用uni.uploadfile并结合任务管理。首先，通过uni.uploadfile方法完成基础上传操作，传入文件路径、服务器地址和请求参数；其次，利用uni.createuploadtask监听上传进度以提升用户体验；第三，多文件上传时应控制并发数量，采用队列方式限制同时上传的文件数；最后，加入错误处理与重试机制，在fail回调中记录失败次数并支持自动延时重试，确保上传稳定性。

文件上传功能在uni-app开发中非常常见，尤其在涉及用户头像、图片、文档等场景时。实现上传不光是调用接口那么简单，还需要考虑进度监控、错误处理、多文件支持等问题。下面从几个关键点出发，讲讲如何实际操作。

1. 使用 uni.uploadFile 实现基础上传

uni-app 提供了 uni.uploadFile 方法用于上传文件，这是最常用的方式。使用时需要传入文件路径、服务器地址以及请求参数。

uni.chooseImage({
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0];
    uni.uploadFile({
      url: 'https://yourdomain.com/upload',
      filePath: tempFilePath,
      name: 'file',
      formData: {
        user: 'test'
      },
      success: (uploadRes) => {
        console.log('上传成功', uploadRes);
      },
      fail: (err) => {
        console.error('上传失败', err);
      }
    });
  }
});

登录后复制

url：上传的目标地址
filePath：要上传的文件路径
name：后端接收字段名（通常为 file）
formData：额外参数（可选）

注意：uni.uploadFile 返回的是一个任务对象，可以用来监听上传进度。

2. 监控上传进度的方法

虽然 uni.uploadFile 支持上传，但它本身并没有提供进度回调。不过 uni-app 提供了一个配套方法 uni.createUploadTask，可以创建上传任务并监听进度。

const uploadTask = uni.uploadFile({
  url: 'https://yourdomain.com/upload',
  filePath: tempFilePath,
  name: 'file'
});

uploadTask.onProgressUpdate(res => {
  console.log('上传进度:', res.progress + '%');
  console.log('已上传字节数:', res.totalBytesSent);
  console.log('总字节数:', res.totalBytesExpectedToSend);
});

登录后复制

这个回调会定期触发，可以在页面上展示一个进度条或百分比提示，提升用户体验。

注意：不是所有平台都支持精确的进度更新，比如部分小程序可能只能获取到开始和结束状态。

3. 多文件上传与并发控制

如果需要同时上传多个文件，可以循环调用 uni.uploadFile，但要注意控制并发数量，避免资源占用过高或被服务器限制。

一种简单的做法是：

DeepSeek App

DeepSeek官方推出的AI对话助手App

查看详情

将文件列表放入队列
每次只发起固定数量的上传请求（如 3 个）
每个任务完成后继续取下一个

示例逻辑如下：

let currentIndex = 0;
const maxConcurrent = 3;

function uploadNext(files) {
  if (currentIndex >= files.length) return;

  for (let i = 0; i < maxConcurrent && currentIndex < files.length; i++) {
    const filePath = files[currentIndex++];
    const task = uni.uploadFile({
      url: 'https://yourdomain.com/upload',
      filePath: filePath,
      name: 'file',
      success: () => {
        console.log(`${filePath} 上传完成`);
      }
    });

    task.onProgressUpdate(res => {
      console.log(`文件 ${filePath} 的上传进度：${res.progress}%`);
    });
  }
}

登录后复制

这种方式可以有效管理并发，避免一次性上传太多文件导致卡顿或失败。