如何设置uni.uploadFile的超时时间？

王小婷

发布于 2025-05-25 16:01:40

12600

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

在 Uni-App 中，uni.uploadFile 并不直接提供设置超时时间的选项。不过，可以通过设置请求的 timeout 属性来控制超时时间，具体方法如下：

1. 使用 `uni.request` 作为替代

由于 uni.uploadFile 本身不支持 timeout 参数，你可以使用 uni.request 来进行文件上传，手动设置超时时间。

1.1 示例代码

function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file); // 添加文件
  formData.append('otherData', 'value'); // 添加其他数据

  const requestTimeout = 5000; // 设置超时时间为 5 秒

  const uploadPromise = new Promise((resolve, reject) => {
    uni.request({
      url: 'https://example.com/upload', // 服务器上传接口
      method: 'POST',
      header: {
        'Content-Type': 'multipart/form-data' // 设置请求头
      },
      data: formData,
      success: (res) => {
        resolve(res.data);
      },
      fail: (error) => {
        reject(error);
      }
    });
  });

  // 设置超时处理
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('上传超时'));
    }, requestTimeout);
  });

  // 使用 Promise.race 来处理超时和成功/失败
  Promise.race([uploadPromise, timeoutPromise])
    .then((data) => {
      console.log('上传成功:', data);
    })
    .catch((error) => {
      console.error('上传失败或超时:', error);
    });
}

1.2 说明

uploadPromise：这是文件上传的 Promise，成功时解析数据，失败时拒绝。
timeoutPromise：这是一个定时器 Promise，如果超过设定的超时时间，则拒绝。
Promise.race：同时执行两个 Promise，第一个完成的 Promise 将决定最终的结果。

2. 进度监控

如果你需要监控上传进度，可以使用 uni.uploadFile，但要注意不能设置超时时间。

2.1 使用 `uni.uploadFile` 示例

function uploadFile(file) {
  uni.uploadFile({
    url: 'https://example.com/upload',
    filePath: file.path, // 文件路径
    name: 'file', // 文件字段名
    formData: {
      otherData: 'value' // 其他表单数据
    },
    success: (res) => {
      console.log('上传成功:', res.data);
    },
    fail: (error) => {
      console.error('上传失败:', error);
    },
    // 进度回调
    progress: (progressEvent) => {
      const percentage = Math.round((progressEvent.loaded / progressEvent.total) * 100);
      console.log(`上传进度: ${percentage}%`);
    }
  });
}