uni-app中uni.uploadFile上传文件的timeout参数不起作用(4.29、4.07、3.7.6版本),真机测试了多个版本均无效

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

uni-app中uni.uploadFile上传文件的timeout参数不起作用(4.29、4.07、3.7.6版本),真机测试了多个版本均无效

项目属性 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows10和windows11
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 多个品牌多个机型;小米MIX2、三星SM-G988U1;模拟器都不行
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

官方例子;都是可以上传了;当超时超过配置的时间;也不受控制;忘官方解决这个bug;

预期结果:

希望timeout 可以限制住超时;当我们的上传到30s;可以提示超时;

实际结果:

目前不受控制;感觉设置timeout 没有任何效果;

bug描述:

uni.uploadFile上传文件的timeout参数不起作用;比喻超时时间设置为10ms; 也可以正常上传;timeout完全没有用;

Image 1 Image 2 Image 3


1 回复

在uni-app中使用uni.uploadFile上传文件时,如果遇到timeout参数不生效的问题,确实可能会让人感到困惑。尽管文档中指明timeout参数用于设置请求的超时时间(单位:ms),但在某些情况下,这个参数可能不会按预期工作。以下是一些可能的代码示例和调试思路,帮助你更好地理解和解决这个问题。

代码示例

首先,确保你的uni.uploadFile调用中正确设置了timeout参数:

uni.uploadFile({
    url: 'https://example.com/upload', // 替换为你的上传接口
    filePath: tempFilePaths[0],
    name: 'file',
    formData: {
        user: 'test'
    },
    success: (uploadFileRes) => {
        console.log('上传成功', uploadFileRes);
    },
    fail: (err) => {
        console.error('上传失败', err);
    },
    complete: () => {
        console.log('上传完成');
    },
    timeout: 10000 // 设置超时时间为10秒
});

调试思路

  1. 确认网络状况: 确保测试设备的网络连接稳定,因为不稳定的网络可能导致请求看似超时,实则是因为网络延迟。

  2. 后端接口检查: 确认后端接口是否有处理超时的逻辑,以及接口本身是否有可能因为某些原因(如处理大量数据)而延迟响应。

  3. 日志记录: 在后端增加日志记录,查看请求是否到达服务器,以及服务器的处理时间。这有助于区分问题是出在客户端还是服务器端。

  4. 使用Promise和async/await: 虽然这不直接解决timeout问题,但使用Promise或async/await可以更优雅地处理异步请求,并可能提供更清晰的错误处理逻辑。

  5. 升级uni-app框架: 如果问题依旧存在,考虑升级到uni-app的最新版本,因为新版本可能修复了旧版本中的bug。

  6. 自定义超时处理: 如果timeout参数确实不生效,可以考虑在客户端实现一个自定义的超时处理机制,比如使用setTimeout在发起请求的同时设置一个计时器,如果计时器先触发而请求还未完成,则手动处理超时逻辑。

const uploadPromise = new Promise((resolve, reject) => {
    uni.uploadFile({
        // ... 参数配置
        success: resolve,
        fail: reject
    });
});

const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('Upload timed out')), 10000); // 10秒超时
});

Promise.race([uploadPromise, timeoutPromise])
    .then(result => {
        console.log('Upload successful', result);
    })
    .catch(error => {
        console.error('Upload failed or timed out', error);
    });

通过上述方法,你可以更灵活地处理上传过程中的超时问题。

回到顶部