UniApp之播放视频、 下载视频到手机相册、添加下载进度条功能（踩坑记录） |
您所在的位置：网站首页 › 央视app怎么下载视频到本地相册 › UniApp之播放视频、 下载视频到手机相册、添加下载进度条功能（踩坑记录） |
|
最近有写到一个uniapp视频下载的功能 ememem 其实下载好写 但是加入进度条以后就出现了一些bug 首先，添加进度条以后，加载的时候开头会反复加载其次在downloadTask.onProgressUpdate的回调中的信息弹出框不会弹出也百度了一些资料 但是使用百度的写法发现并没有解决这些bug 最后请同事帮我看了下 找到了原因 下载视频的时候相当于立马创建了一个水池 往里面注入水的过程就是下载的过程 当点击下载的时候 回调会立刻执行也就是水池建立完毕了 所以返回的下载进度百分比会立刻由0变为100 但是进度条的加载是需要时间的 所以回调中的信息会先执行 进度条依然在跑 直接上代码吧 css 下载 js1.实际会用到的参数 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 最后说一下感觉代码还不够完善 1.在百分比走到100%之后没有事件能够给出提示 官方给的 @activeend="fishAnimate"事件支持小程序 2.下载提示会先于进度条出现 有空会来更新代码的 如果有小伙伴写了这个功能 也麻烦分享一下 谢谢啦!!☆⌒(*＾-゜)v |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |