uni-app 下载文件 downloadTask.onProgressUpdate 在下载自定义路径的wgt包时监听不到

uni-app 下载文件 downloadTask.onProgressUpdate 在下载自定义路径的wgt包时监听不到

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 Windows 10 专业版 20H2
HBuilderX类型 正式
HBuilderX版本 3.2.3
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机

华为mate40pro,iphone 12 pro max, Honor 8c

示例代码:

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
      <text>({{downloadedSize}}/{{packageFileSize}}M)</text>  
        </view>  
    </view>  
</template>  

<script>  
  let downloadTask = null  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
        downloadedSize: 0,  
        packageFileSize: 0,  
        tempFilePath: ''  
            }  
        },  
        onLoad() {  
      this.downloadPackage()  
        },  
        methods: {  
      downloadPackage() {  
        //下载包  
        downloadTask = uni.downloadFile({  
          // 无法监听到下载进度  
            // url: 'https://fil.xbsjipfs.com/down/6666.wgt',  
          // 可以监听到下载进度  
            // url: 'https://fil.xbsjipfs.com/xbsj.apk',  
          // 可以监听到下载进度(升级中心云函数上传升级包后的路径)  
            url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-4f945785-60e1-483a-9f14-12e21fe2046c/36ce77aa-93a8-4fd7-ad34-c9583cebcc02.wgt',  
            success: res => {  
            console.log(res);  
                if (res.statusCode == 200) {  
              console.log(9999);  
                    this.downloadSuccess = true;  
                    this.tempFilePath = res.tempFilePath  

                    // 强制更新,直接安装  
                    if (this.is_mandatory) {  
                        this.installPackage();  
                    }  
                }  
            },  
            fail: () => {  
            console.log(99999);  

                // this.downLoadPercent = 0  
                this.downloadedSize = 0  
                this.packageFileSize = 0  

                downloadTask = null;  
            }  
        });  

        downloadTask.onProgressUpdate(res => {  
          console.log(JSON.stringify(res), '进度条');  
            // this.downLoadPercent = res.progress;  
            this.downloadedSize = (res.totalBytesWritten / Math.pow(1024, 2)).toFixed(2);  
            this.packageFileSize = (res.totalBytesExpectedToWrite / Math.pow(1024, 2)).toFixed(2);  
        });  
      },  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

操作步骤:

  • 下载测试压缩包或者复制代码示例

预期结果:

  • 下载文件监听到自定义的wgt包下载过程

实际结果:

  • 三种地址都可以正常下载到文件,但是自定义的wgt包下载路径在下载时无法监听到下载进度

test-app.rar


更多关于uni-app 下载文件 downloadTask.onProgressUpdate 在下载自定义路径的wgt包时监听不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

与下载文件大小有关。猜测网速快的话一下就完毕了 所以没有进度直接返回下载完毕

更多关于uni-app 下载文件 downloadTask.onProgressUpdate 在下载自定义路径的wgt包时监听不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大小也试过一个近5M的wgt包,一样的,下载可以下载只是监测不到下载进度,还有就是同一个文件如果把后缀名改为apk就可以检测到了

辛苦好哥哥们帮我看看这个问题,官方的升级中心因为再国外无法访问到的原因现在要换升级的接口

回复 1***@qq.com: 进度需要获取到文件大小 我测试了一下发现Content-Length为空你们配置一下再试试

回复 DCloud_Android_ST: 问题解决了,就是这个content-length的原因,可能是wgt这种不常规的文件服务器内置没有配置.在服务器里单独配置后可以了.谢谢

这个问题是由于服务器响应头设置导致的。当下载 .wgt 文件时,如果服务器没有正确返回 Content-Length 响应头,downloadTask.onProgressUpdate 将无法监听到下载进度。

从你的测试结果可以看出:

  1. 第一个自定义 .wgt 包地址无法监听进度
  2. .apk 文件可以正常监听进度
  3. 升级中心的 .wgt 包也可以正常监听进度

解决方案:

  1. 检查服务器配置:确保你的服务器在响应 .wgt 文件下载请求时,正确设置了 Content-Length 响应头。这是最关键的一步。

  2. 临时解决方案:如果你无法控制服务器配置,可以考虑以下替代方案:

    // 使用 uni.request 获取文件大小,然后手动计算进度
    uni.request({
      url: '你的.wgt文件地址',
      method: 'HEAD',
      success: (headRes) => {
        const totalSize = headRes.header['Content-Length']
        // 然后使用 uni.downloadFile 下载,并根据已下载数据手动计算进度
      }
    })
回到顶部