SaberErza
SaberErza
  • 发布:2020-07-07 13:53
  • 更新:2021-05-08 17:40
  • 阅读:4020

【报Bug】上传文件通过uploadTask.onProgressUpdate 在APP端做进度条失败

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 19041

HBuilderX类型: 正式

HBuilderX版本号: 2.7.14

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: 小米

手机机型: mi6x

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:
const uploadTask = uni.uploadFile({  
                                                url: aaa, //开发者服务器 url  
						filePath: filePath, //要上传文件资源的路径  
						name: 'file', //必须填file  
  
})  
uploadTask.onProgressUpdate((res) => {  
						this.updata = res  
						// console.log(res.totalBytesSent + '/' + res.totalBytesExpectedToSend)  
						console.log('上传进度' + res.progress);  
						console.log('已经上传的数据长度' + res.totalBytesSent);  
						console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);  
					});  

预期结果:

在app端无法动态渲染进度数据

实际结果:

app应该可以onProgressUpdate得到的数据 动态响应

bug描述:

const uploadTask = uni.uploadFile({  
                                                url: aaa, //开发者服务器 url  
						filePath: filePath, //要上传文件资源的路径  
						name: 'file', //必须填file  
  
})  
uploadTask.onProgressUpdate((res) => {  
						this.updata = res  
						// console.log(res.totalBytesSent + '/' + res.totalBytesExpectedToSend)  
						console.log('上传进度' + res.progress);  
						console.log('已经上传的数据长度' + res.totalBytesSent);  
						console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);  
					});  

<view class="">{{updata.progress}}</view>

在web端,可以动态响应.而在app端,只响应了第一次和最后一次.就是显示直接从0-100%...(升级到2.8测试了下,情况也一样

2020-07-07 13:53 负责人:DCloud_Android_DQQ 分享
已邀请:

最佳回复

DCloud_Android_DQQ

DCloud_Android_DQQ

2.9.12 alpha bug已确认。 稍后版本会修复。

jxtian

jxtian

确认bug,等待处理。

  • 5***@qq.com

    请问解决了吗???


    2020-09-29 17:15

  • 摆渡人

    还没解决么??


    2020-10-15 18:17

DCloud_Android_DQQ

DCloud_Android_DQQ

统一说明一下大家遇到的问题。

目前存在一个问题是控制台打印的日志存在延迟。
这样就导致如果 一个文件如果在1s之内就已经上传完成,但是反应到控制台上的现象也是,在数秒之内才会陆陆续续打印出来。

进而大家会认为进度条没有如实的展示进度,但是实际上进度展示是没问题的。

大家可以在进度监听的回调中打印一下时间戳,以便观察这个问题。

uploadTask.onProgressUpdate((r) => {  
  
							let a = r.totalBytesSent  
  
							let b = r.totalBytesExpectedToSend  
  
							that.per = ((a / b) * 100).toFixed(0)  
  
							console.log("per  " + that.per + "time  " + new Date().toLocaleString())  
  
						})
  • 2***@qq.com

    也不是延不延迟的问题。在电脑HBuilderX内置浏览器预览里上传图片,progress进度条挺乖,是一点一点到100%的。到了手机上看就坐飞机了,一下从零直接蹦到100%。上传的都是一张图片,同样的大小


    2020-11-24 15:59

DCloud_Android_DQQ

DCloud_Android_DQQ

hx 3.0.7 bug已修复

jxtian

jxtian

你的服务器接口方便给我测试一下?

l***@126.com

l***@126.com

遇到同样的问题

wini

wini

俺也一样

jxtian

jxtian

是否上传的文件体积太小?

|测试项|结果|
|:-|:-|
|测试结果|未能复现|
|环境|hbuilderX 2.7.14、hbuilderX 2.8.0|
|ios| iPhone11|
|andriod|oppo andriod5.1, andriod 10|

5:48:17.779 上传进度2 at pages/API/upload-file/upload-file.vue:60
15:48:17.800 已经上传的数据长度10240 at pages/API/upload-file/upload-file.vue:61
15:48:17.824 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:17.846 上传进度5 at pages/API/upload-file/upload-file.vue:60
15:48:17.866 已经上传的数据长度20480 at pages/API/upload-file/upload-file.vue:61
15:48:17.887 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:17.908 上传进度7 at pages/API/upload-file/upload-file.vue:60
15:48:17.928 已经上传的数据长度30720 at pages/API/upload-file/upload-file.vue:61
15:48:17.948 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:17.968 上传进度10 at pages/API/upload-file/upload-file.vue:60
15:48:17.991 已经上传的数据长度40960 at pages/API/upload-file/upload-file.vue:61
15:48:18.011 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.033 上传进度13 at pages/API/upload-file/upload-file.vue:60
15:48:18.054 已经上传的数据长度51200 at pages/API/upload-file/upload-file.vue:61
15:48:18.074 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.097 上传进度15 at pages/API/upload-file/upload-file.vue:60
15:48:18.118 已经上传的数据长度61440 at pages/API/upload-file/upload-file.vue:61
15:48:18.142 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.165 上传进度18 at pages/API/upload-file/upload-file.vue:60
15:48:18.187 已经上传的数据长度71680 at pages/API/upload-file/upload-file.vue:61
15:48:18.209 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.231 上传进度21 at pages/API/upload-file/upload-file.vue:60
15:48:18.253 已经上传的数据长度81920 at pages/API/upload-file/upload-file.vue:61
15:48:18.277 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.294 上传进度23 at pages/API/upload-file/upload-file.vue:60
15:48:18.315 已经上传的数据长度92160 at pages/API/upload-file/upload-file.vue:61
15:48:18.337 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.357 上传进度26 at pages/API/upload-file/upload-file.vue:60
15:48:18.379 已经上传的数据长度102400 at pages/API/upload-file/upload-file.vue:61
15:48:18.401 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.423 上传进度29 at pages/API/upload-file/upload-file.vue:60
15:48:18.447 已经上传的数据长度112640 at pages/API/upload-file/upload-file.vue:61
15:48:18.464 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.488 上传进度31 at pages/API/upload-file/upload-file.vue:60
15:48:18.513 已经上传的数据长度122880 at pages/API/upload-file/upload-file.vue:61
15:48:18.534 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.556 上传进度34 at pages/API/upload-file/upload-file.vue:60
15:48:18.576 已经上传的数据长度133120 at pages/API/upload-file/upload-file.vue:61
15:48:18.601 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.628 上传进度36 at pages/API/upload-file/upload-file.vue:60
15:48:18.645 已经上传的数据长度143360 at pages/API/upload-file/upload-file.vue:61
15:48:18.666 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.687 上传进度39 at pages/API/upload-file/upload-file.vue:60
15:48:18.708 已经上传的数据长度153600 at pages/API/upload-file/upload-file.vue:61
15:48:18.729 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.753 上传进度42 at pages/API/upload-file/upload-file.vue:60
15:48:18.775 已经上传的数据长度163840 at pages/API/upload-file/upload-file.vue:61
15:48:18.797 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.817 上传进度44 at pages/API/upload-file/upload-file.vue:60
15:48:18.842 已经上传的数据长度174080 at pages/API/upload-file/upload-file.vue:61
15:48:18.864 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.884 上传进度47 at pages/API/upload-file/upload-file.vue:60
15:48:18.904 已经上传的数据长度184320 at pages/API/upload-file/upload-file.vue:61
15:48:18.925 预期需要上传的数据总长度387573 at pages/API/upload-file/upload-file.vue:62
15:48:18.946 上传进度50 at pages/API/upload-file/upload-file.vue:60

  • l***@126.com

    console.log可以正常打印进度,但绑定到组件时,不会同步更新视图。


    2020-07-10 16:01

  • l***@126.com

    使用强制重新渲染也不行啊,好像渲染线程被阻塞的感


    2020-07-10 16:04

  • jxtian

    回复 l***@126.com: 那你要找组件和自己代码的问题


    2020-07-10 16:18

  • l***@126.com

    回复 jxtian: 不是自定义组件,我测试的有只有一个VIEW标签


    2020-07-10 17:11

  • jxtian

    回复 l***@126.com: 没明白,把问题描述的清楚点,为了能准确定位问题,可以提供一个完整的示例工程。


    2020-07-10 17:35

  • SaberErza (作者)

    回复 jxtian: 人家描述的很清晰了吧,你试试做一个进度条就清楚了


    2020-07-15 10:27

  • chinahappybeer

    回复 SaberErza: ios 没问题,android 确实不能同步更新视图


    2020-07-22 13:52

  • 小白3

    回复 jxtian: android 不能同步更新视图,不是看控制台,看界面变化你就知道了


    2020-10-26 16:52

l***@126.com

l***@126.com

<template> <view> <view class="">{{progress}}</view> </viewz. <template>

js:
data里只有
progress 这一个

无情哈拉少

无情哈拉少 - 6666

厉害了

天蓝水更蓝

天蓝水更蓝

我今天也遇到了

摆渡人

摆渡人

我也遇到了,查了一整天各种情况都试过了。结果是BUG

1***@qq.com

1***@qq.com

this指向问题吧

小白3

小白3

肯定还没修复,还是用市场的插件吧

[已删除]

[已删除]

承接前端H5、小程序、APP、PC端网站等外包,主要技术栈为vue、uni-app,有意请加微信:13070273424(我是前端。1. 我找有单子的服务端合作人。2. 整个项目外包给我,我这也有个小团队。3. 兼职,公司/团队偶尔丢点小项目或者页面调整等)

i***@qq.com

i***@qq.com - it developer

这么长时间了还没解决?

襄阳老农

襄阳老农

还没解决吗???

  • DCloud_Android_DQQ

    留一下 可以复现问题的代码。我们尝试复现一下。 如果有安全顾虑,也可以私发我


    2020-11-16 17:24

  • 襄阳老农

    回复 DCloud_Android_DQQ: <view class="upload_video" @tap="uploadFile"></view>


    // 文件上传

    uploadFile() {

    let that = this

    uni.chooseVideo({

    success(result) {

    that.show = false

    let uploadTask = uni.uploadFile({

    url: '',

    filePath: result.tempFilePath,

    name: 'files',

    success(res) {

    console.log(res, '2----')

    that.show = false

    },

    fail(err) {

    uni.bs.showToast(err.errMsg)

    }

    })

    uploadTask.onProgressUpdate((r) => {

    // console.log(r)

    let a = r.totalBytesSent

    let b = r.totalBytesExpectedToSend

    that.per = ((a / b) * 100).toFixed(0)

    console.log(that.per)

    })

    },

    fail(error) {

    uni.bs.showToast(error.errMsg)

    }

    })

    },


    2020-11-16 18:22

  • 襄阳老农

    回复 DCloud_Android_DQQ: 我开始直接使用 progress 进度百分比不行, 然后自己计算当前上传大小和总文件大小的比例还是不行, 在控制台打印没问题, 页面显示进度直接从 1 到 100 了


    2020-11-16 18:25

  • DCloud_Android_DQQ

    回复 襄阳老农: 收到 我尝试复现一下


    2020-11-16 19:29

  • DCloud_Android_DQQ

    回复 襄阳老农: 我刚才试验了一下代码。 如果回调中返回的进度是正常的。 界面更新不正常 应该是界面刷新的问题。 你具体怎么更新的界面 发出来看看


    2020-11-16 20:01

  • 襄阳老农

    回复 DCloud_Android_DQQ: 你好,第一种我直接在 监听里面showLoading 然后进度100的时候,hideLoading,但是loading会闪一下就关闭了, 我试了2M多的视频和50M的视频,都是这样

    uploadTask.onProgressUpdate((r) => {

    let a = r.totalBytesSent

    let b = r.totalBytesExpectedToSend

    that.per = ((a / b) * 100).toFixed(0)


    						// 第一种  
    uni.showToast({
    title: '已上传' + that.per + '%'
    })
    if(that.per == 100) {
    uni.hideLoading()
    }
    })

    2020-11-17 10:35

  • 襄阳老农

    回复 DCloud_Android_DQQ: 第二种就是 直接在页面把 per 值放在页面上观察 也是很快到一百,没有那种增长效果

    <view class="title">本地短视频上传 {{per}}</view>


    2020-11-17 10:38

  • DCloud_Android_DQQ

    回复 襄阳老农: 确实。我试了一下。 实际回调的速度其实很快。 之所以控制台正常是因为 控制台日志打印有延迟操作。 你可以在回调里面打印一下时间戳验证一下


    2020-11-17 11:55

  • 1***@qq.com

    回复 DCloud_Android_DQQ: 那现在是怎么样?修复了吗


    2020-11-23 16:24

  • p***@qq.com

    回复 DCloud_Android_DQQ: 的确从时间戳和console.log(res.progress)上看是没问题的,但现在问题是页面绑定不了进度,从1就到100了,没有中间的过程。我用100M的文件测试,时间戳显示用了5秒,那在5秒时间内,理论上页面视图应该由1递增到100,但现在1, 然后过5秒,最后直接100.进度的目的为了告诉用户上传进度,这种由于视图绑定变量无效,已经失去了进度条的意义。我还对进度条还另外做了处理,uploadTask.onProgressUpdate((r) => {if(r.progress % 10 == 0 && that.per!= res.progress) {that.per=r.progress})。官方如何解决进度的视图绑定问题?


    2020-12-01 18:28

  • laravuel

    回复 DCloud_Android_DQQ: 这不是快不快的问题,上传100M的文件,界面上也是直接到100,但是控制台打印却正常,这是两回事


    2020-12-12 14:40

  • DCloud_Android_DQQ

    回复 laravuel: 问题已确认。 确实存在Bug. 下个版本会修复。


    2020-12-14 10:41

c***@qq.com

c***@qq.com

我在APP开发上也碰到同样的问题。明明H5试了是正常的,到了APP进度条就一闪而过了,花了好几个小时才确认是task.onProgressUpdate没有同步上传进度。
同样是几十M的文件,h5从开始上传到结束进度条几乎是同步的,但是app端上传进度一秒就到100%了,然后文件依然还在上传中,直到十几秒以后,才真正上传成功。

APP进度:


H5进度:

相关代码:

这个问题解决了吗?

  • DCloud_Android_DQQ

    方便发我一下 这个问题的demo吗。 我来定位一下问题


    2020-12-07 10:44

  • c***@qq.com

    回复 DCloud_Android_DQQ: 我已经做成demo,可以私发给你,方便留个联系方式吗


    2020-12-07 14:49

  • DCloud_Android_DQQ

    回复 c***@qq.com: 目前我观测到的问题是,走到99%之后 到100%的那个进度 会停留很长时间。 这个是你遇到的问题吗


    2020-12-07 17:54

  • DCloud_Android_DQQ

    回复 c***@qq.com: qq 643833712


    2020-12-07 17:54

  • c***@qq.com

    回复 DCloud_Android_DQQ: 嗯是的,就是这个问题


    2020-12-07 19:22

  • c***@qq.com

    回复 DCloud_Android_DQQ: 正式版2.9.8,进度条会在一秒钟到100,然后等一段时间才上传成功。Alpha版,会先到99,上传成功后,进度条才刷到100。应该是有改进过。


    2020-12-07 19:26

  • DCloud_Android_DQQ

    回复 c***@qq.com: 目前来看,这个只能改善到这个程度了。 目前的进度计算只能统计文件上传的写入进度。

    你的应用之所以会在99%位置卡很久,是因为服务器接收转存校验这部分逻辑耗时。客户端是没法统计的。


    2020-12-09 12:42

  • c***@qq.com

    回复 DCloud_Android_DQQ: 服务器接收到文件的处理时间其实是很短的,如果文件上传到服务器的时间是10秒,进度条也是按10秒钟来展示,到99%才卡比较久,这还可以接受。问题是不管上传多大的文件上传进度从0到99%仅耗时1秒,这挺夸张的。


    2020-12-09 15:47

  • DCloud_Android_DQQ

    回复 c***@qq.com: 我试试比较大的文件 。


    2020-12-09 16:05

  • DCloud_Android_DQQ

    回复 c***@qq.com: bug已确认,感谢反馈。下个版本会修复。


    2020-12-09 16:50

  • c***@qq.com

    回复 DCloud_Android_DQQ: 谢谢。辛苦了。


    2020-12-09 17:19

  • DCloud_Android_DQQ

    回复 c***@qq.com: 你叫我一下qq 643833712 我先帮你打个内测包。 你帮忙验证一下是否修复了。


    2020-12-09 17:20

  • c***@qq.com

    回复 DCloud_Android_DQQ: 已申请加好友了


    2020-12-09 17:29

  • DCloud_Android_DQQ

    回复 c***@qq.com: 你给我发个消息。。我没看到你。。。。。


    2020-12-09 17:35

  • 5***@qq.com

    回复 DCloud_Android_DQQ: 我也是遇到了瞬间到达99,之后相对很长一段时间跳到100的情景,而且是在今天更新了20201231版本之后遇到的,这个问题您的内侧包是否解决?如果解决了能否发一份到我用户名的邮箱里?


    2021-01-04 16:59

  • DCloud_Android_DQQ

    回复 5***@qq.com: 内测包已经修复。 我加你QQ。 帮你打个内测包 你验证一下


    2021-01-05 10:55

c***@qq.com

c***@qq.com

@DCloud_Android_DQQ

深深居网络

深深居网络

这个问题解决了嘛?

  • DCloud_Android_DQQ

    已解决。 使用最新版本打包测试


    2021-04-29 12:32

  • 深深居网络

    回复 DCloud_Android_DQQ: 我用的应该是最新的3.1.12.20210428 这样只用

    uploadTask.onProgressUpdate((res) => {

    console.log(res.progress)

    // this.percent = res.progress

    // #ifndef APP-PLUS

    uni.showLoading({

    title: '上传进度'+ res.progress +'%'

    });

    //#endif

    });

    手机端会出现一闪闪的 h5正常


    2021-04-30 10:21

  • DCloud_Android_DQQ

    回复 深深居网络: 。。。。你不能频繁的showLoading啊。。你参考一下hello uni


    2021-04-30 11:27

  • 深深居网络

    回复 DCloud_Android_DQQ:好的 了解~


    2021-04-30 12:00

q***@taisam.cn

q***@taisam.cn

3.1.12版本的
uploadTask.onProgressUpdate(async function (res) {
console.log(res);
// 这边在ios模拟器中没值
})

该问题目前已经被锁定, 无法添加新回复