UniApp之播放视频、下载视频到手机相册、添加下载进度条功能（踩坑记录）

Bertha 。 2021-08-30 23:52 899阅读 0赞

最近有写到一个uniapp视频下载的功能 ememem 其实下载好写 但是加入进度条以后就出现了一些bug

*  首先，添加进度条以后，加载的时候开头会反复加载
 *  其次在downloadTask.onProgressUpdate的回调中的信息弹出框不会弹出

也百度了一些资料 但是使用百度的写法发现并没有解决这些bug 最后请同事帮我看了下  
找到了原因 下载视频的时候相当于立马创建了一个水池 往里面注入水的过程就是下载的过程  
当点击下载的时候 回调会立刻执行也就是水池建立完毕了 所以返回的下载进度百分比会立刻由0变为100  
但是进度条的加载是需要时间的 所以回调中的信息会先执行 进度条依然在跑

直接上代码吧

## css ##

<view class="uni-padding-wrap uni-common-mt" 	v-if="videoFlag == 'true' ">
    							<view><video id="myVideo" :src="myVideoSrc"></video></view>
    							<view class="save-vido">
    								<button type="primary" @tap="uploadVideo" size="mini">下载</button>
    								<view class="progress-box" v-if="percentflag">
    									<progress :percent="percentCurrent" show-info stroke-width="3" active @activeend="fishAnimate" />
    								</view>
    							</view>
    						</view>

## js ##

1.实际会用到的参数 v-if 不需要的可以直接删掉

export default{ 
    	data(){ 
    		return{ 
    			myVideoSrc: '',
    			percentCurrent: 0,//下载进度百分比
    		}
    	}
    }

2.方法

uploadVideo() { 
    			//下载视频
    			console.log('下载视频');
    			const downloadTask = uni.downloadFile({ 
    				url: this.myVideoSrc,   //视频路径
    				success: res => { 
    					// console.log(res)
    					if (res.statusCode == 200) { 
    						//下载的回调 不要都用res  要换一个使用 方便区分
    						downloadTask.onProgressUpdate(red => { 
    							let that = this;
    							that.percentCurrent = red.progress;
    
    							console.log(that.percentCurrent);
    							if (red.progress === 100) { 
    								uni.showToast({ 
    									title: '下载完成！',
    									icon: 'success',
    									duration: 2000,
    									position: 'top'
    								});
    								//当进程全部下载完成之后 在执行保存到相册的回调
    								uni.saveImageToPhotosAlbum({ 
    									filePath: res.tempFilePath, //注意这里是res 不是red
    									success: ()=> { 
    										uni.showToast({ 
    											title: '下载成功',
    											icon: 'none'
    										});
    									},
    									fail: ()=> { 
    										uni.showToast({ 
    											title: '保存失败，请稍后重试',
    											icon: 'none'
    										});
    									}
    								});
    							}
    						});
    					}
    				}
    			});
    		},

这里downloadTask.onProgressUpdate是downloadFile方法的回调

通过 downloadTask，可监听下载进度变化事件，以及取消下载任务。

官方示例中有相应的参数 **onProgressUpdate监听下载进度变化**

返回的参数progress是下载进度百分比

最后放一下官方例子的网址 [https://uniapp.dcloud.io/api/request/network-file?id=downloadfile][https_uniapp.dcloud.io_api_request_network-file_id_downloadfile]

最后说一下感觉代码还不够完善  
1.在百分比走到100%之后没有事件能够给出提示 **官方给的 @activeend="fishAnimate"事件支持小程序**  
2.下载提示会先于进度条出现

有空会来更新代码的 如果有小伙伴写了这个功能 也麻烦分享一下 谢谢啦!!☆⌒(\*＾-゜)v

[https_uniapp.dcloud.io_api_request_network-file_id_downloadfile]: https://uniapp.dcloud.io/api/request/network-file?id=downloadfile