uni-app uni.uploadFile上传图片和视频到oss服务器时个别手机出现网络超时

uni-app uni.uploadFile上传图片和视频到oss服务器时个别手机出现网络超时

示例代码：

chooseVideo(mode) {  
    let that = this  
    let startTime = '';  
    uni.chooseMedia({  
        count: 1,  
        maxDuration: 30,  
        mediaType: ["video"],  
        sourceType: [mode],  
        success: function(res) {  
            const videoFile = res.tempFiles[0]  
            if (videoFile.size > 629145600) {  
                that.$u.toast('视频大小需要在600M以内');  
                return  
            }  
            if (videoFile.duration > 120) {  
                that.$u.toast('视频超过2分钟啦，请裁剪后重新上传');  
                return  
            }  
            that.showUpload = true  
            that.imgNum = 1  
            that.over = 0  
            that.videoHeight = videoFile.height  
            that.videoWidth = videoFile.width  
            let {  
                tempFilePath  
            } = videoFile  
            let keyName = tempFilePath.split('/')  
            let times = that.timestamp(true)  
            const uploadTask = uni.uploadFile({  
                timeout: 120000,  
                url: '', //仅为示例，非真实的接口地址  
                filePath: tempFilePath,  
                name: 'file',  
                header: {  
                    'x-oss-tagging': 'oneDayDel=oneDayDel'  
                },  
                formData: {  
                    key: times + keyName[keyName.length - 1],  
                    policy: that.ossParams.policy,  
                    OSSAccessKeyId: that.ossParams.accessKeyId,  
                    signature: that.ossParams.signature,  
                    'x-oss-security-token': that.ossParams.securityToken  
                },  
                success: (uploadFileRes) => {  
                    that.over = 1  
                    that.showUpload = false  
                    that.videoFile =``  
                    that.videoImg = videoFile.thumbTempFilePath  
                    that.lastTotalBytesSent = 0;  
                    that.internetSpeed = '0kb/s';  
                    that.progress = 0  
                },  
                fail: (err) => {  
                    that.showUpload = false  
                    console.log("会否超时", err.errMsg.indexOf("time"));  
                    if (err.errMsg.indexOf("time") != -1) {  
                        that.$u.toast('上传超时，请选择较小文件或更换网络重试', 3000);  
                    }  
                    that.$wxlog.info('上传相册视频失败==err:', err.errMsg);  
                    that.lastTotalBytesSent = 0;  
                    that.internetSpeed = '0kb/s';  
                    that.progress = 0  
                }  
            })  
        }  
    });  
}

操作步骤：

  1. 调用uni.chooseMedia选择视频
  2. 调用uni.uploadFile上传到oss服务器

预期结果：

正常上传到oss服务器

实际结果：

个别客户手机会出现网络超时或者自动取消上传

Image

bug描述：

个别手机会出现以下问题

  • 问题一：上传缓慢导致网络超时
  • 问题二：视频上传到30%突然就停止了
项目 信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 4.15
第三方开发者工具版本号 1.06.2405172win32-x64
基础库版本号 3.3.5、3.4.3
项目创建方式 HBuilderX

更多关于uni-app uni.uploadFile上传图片和视频到oss服务器时个别手机出现网络超时的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用官方的uni-cdn吧，比阿里云的OSS便宜多了，上传接口官方也封装好了。

更多关于uni-app uni.uploadFile上传图片和视频到oss服务器时个别手机出现网络超时的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni.uploadFile 上传图片和视频到 OSS 服务器时，个别手机出现网络超时的问题，可能是由多种原因引起的。以下是一些可能的原因及解决方案：

1. 网络环境问题

  • 原因：个别手机可能处于网络信号较弱的区域，或者网络连接不稳定。
  • 解决方案：
    • 提示用户检查网络连接，确保网络信号良好。
    • 在上传前检测网络状态，可以使用 uni.getNetworkType 来获取当前网络类型（如 Wi-Fi、4G 等），并根据情况提示用户切换网络。

2. 文件大小问题

  • 原因：上传的文件较大，特别是在网络较慢或不稳定的情况下，容易导致超时。
  • 解决方案：
    • 对文件进行压缩或分片上传。可以使用 uni.compressImage 对图片进行压缩，或者使用分片上传的方式将大文件分成多个小文件上传。
    • 设置合理的超时时间。可以通过 timeout 参数调整 uni.uploadFile 的超时时间，但要注意不要设置过长，以免影响用户体验。

3. 服务器响应问题

  • 原因：OSS 服务器在处理请求时可能出现延迟或响应较慢。
  • 解决方案：
    • 检查 OSS 服务器的负载情况，确保服务器能够正常处理请求。
    • 使用 CDN 加速，减少上传请求的延迟。

4. 客户端缓存问题

  • 原因：个别手机可能存在缓存问题，导致上传失败。
  • 解决方案：
    • 清理客户端缓存，或者在上传时禁用缓存。可以在 uni.uploadFile 的 header 中添加 Cache-Control: no-cache。

5. 手机系统问题

  • 原因：某些手机系统可能存在兼容性问题，导致上传失败。
  • 解决方案：
    • 确保 uni-app 版本是最新的，以获得更好的兼容性。
    • 在遇到问题时，收集用户的手机型号和系统版本信息，进行针对性的测试和修复。

6. SSL/TLS 问题

  • 原因：某些老旧的手机可能不支持最新的 SSL/TLS 协议，导致与服务器的连接失败。
  • 解决方案：
    • 确保 OSS 服务器支持较旧的 SSL/TLS 协议，或者提示用户升级手机系统。

7. 调试与日志

  • 解决方案：
    • 在上传失败时，记录详细的日志信息，包括网络状态、文件大小、手机型号、系统版本等，以便更好地定位问题。
    • 使用 uni.showToast 或 uni.showModal 提示用户上传失败，并提供重试选项。

8. 重试机制

  • 解决方案：
    • 在上传失败时，自动或手动重试上传操作。可以设置重试次数，避免无限重试。

代码示例

以下是一个简单的上传代码示例，包含了部分上述解决方案：

uni.chooseImage({
  success: (chooseResult) => {
    const tempFilePaths = chooseResult.tempFilePaths;
    const uploadTask = uni.uploadFile({
      url: 'https://your-oss-server.com/upload',
      filePath: tempFilePaths[0],
      name: 'file',
      header: {
        'Cache-Control': 'no-cache'
      },
      timeout: 10000, // 设置超时时间为10秒
      success: (uploadResult) => {
        console.log('上传成功', uploadResult.data);
      },
      fail: (err) => {
        console.error('上传失败', err);
        // 提示用户上传失败，并提供重试选项
        uni.showModal({
          title: '上传失败',
          content: '网络不稳定，是否重试？',
          success: (res) => {
            if (res.confirm) {
              // 重试上传
              uploadTask.abort();
              uni.uploadFile({
                url: 'https://your-oss-server.com/upload',
                filePath: tempFilePaths[0],
                name: 'file',
                header: {
                  'Cache-Control': 'no-cache'
                },
                timeout: 10000,
                success: (retryResult) => {
                  console.log('重试上传成功', retryResult.data);
                },
                fail: (retryErr) => {
                  console.error('重试上传失败', retryErr);
                }
              });
            }
          }
        });
      }
    });
  }
});
回到顶部