1.下载文档
效果图:
代码:
<!-- 进度条代码 -->
<view class="progress-container" v-if="isShowProgress">
<view class="progress-box">
<view class="text">文件下载中,请稍后......</view>
<progress :percent="progress" show-info stroke-width="3" />
</view>
</view>
downlode(FilePath) {
const downloadTask = uni.downloadFile({
url: FilePath,
success: res => {
if (res.statusCode === 200) {
this.isShowProgress = false;
console.log('下载成功');
}
let that = this;
uni.saveFile({
tempFilePath: res.tempFilePath,
success: function(red) {
that.isShowProgress = false;
uni.showModal({
title: '提示',
content: '文件已保存:' + red.savedFilePath,
cancelText: '我知道了',
confirmText: '打开文件',
success: function (res) {
if (res.confirm) {
uni.openDocument({
filePath: red.savedFilePath,
success: (sus) => {
console.log('成功打开');
}
})
}
}
});
}
});
}
})
downloadTask.onProgressUpdate((res) => {
if(res.progress > 0) {
this.isShowProgress = true;
}
this.progress = res.progress;
console.log('下载进度:' + res.progress);
console.log('已下载长度:' + res.totalBytesWritten);
console.log('文件总长度:' + res.totalBytesExpectedToWrite);
})
}
//样式
.progress-container {
position: fixed;
top: 0;
left: 0;
z-index: 99;
background: rgba(0, 0, 0, .2);
width: 750rpx;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
.progress-box {
background: #FFFFFF;
border-radius: 20rpx;
padding: 30rpx;
.text {
margin-bottom: 20rpx;
}
}
}
二.下载图片和视频
下载图片或视频到手机相册
onDown(){
uni.showToast({title:"下载中",icon:"loading"})
uni.downloadFile({
url:'http://www.ibravat.com:8044'+this.play.FilePath,
success: (res)=>{
// 2 成功下载后而且状态码为200时将视频保存到本地系统
if(res.statusCode === 200) {
uni.saveVideoToPhotosAlbum({
filePath: res.tempFilePath
})
uni.hideLoading();
// 提示用户下载成功
uni.showToast({title:"下载成功",icon:"success"});
}
// 如果该资源不可下载或文件格式出错则提示用户
else {
uni.showToast({title:"资源格式错误,请联系管理员"});
}
},
fail: (err)=>{
// 下载失败提醒
uni.hideLoading();
uni.showToast({title:"下载失败"})
}
})
}