可移步插件地址，可直接导入hbuilderx示例项目查看:
uni-app移动端-H5-微信小程序下载保存图片，文档和视频到手机,带进度条文章来源：https://www.toymoban.com/news/detail-645966.html
具体代码如下文章来源地址https://www.toymoban.com/news/detail-645966.html
<template>
<view class="box">
<WaterMark></WaterMark>
<view class="u-m-b-16 u-font-18 u-font-bold">uni-app下载文件</view>
<view v-for="(item,index) in fileList" :key="index">
<view v-if="index==0">
<image :src="item.src" class="imageBox"></image>
</view>
<view v-if="index==1" style="word-break: break-all;">{{item.src}}</view>
<view v-if="index==2"><video :src="item.src" class="imageBox"></video></view>
<view class="previewBtn u-flex u-row-center u-m-b-60" @click="toDownload(item)">{{item.name}}</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
fileList: [{
type: '1',
name: '下载图片',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/efd8e280-60a9-11eb-a16f-5b3e54966275.jpg'
},
{
type: '2',
name: '下载文档',
src: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
},
{
type: '3',
name: '下载视频',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
},
]
};
},
onLoad(options) {},
methods: {
toDownload(item) {
// #ifdef H5
this.downloadH5(item.src)
// #endif
// #ifndef H5
if (item.type == 1) { //下载图片
this.saveVideoApp(item.src)
} else if (item.type == 2) { //下载文件
this.saveFile(item.src)
} else { //下载视频
// #ifdef MP-WEIXIN
this.getDownVideo(item.src)
// #endif
// #ifdef APP-PLUS
this.saveVideoApp(item.src)
// #endif
}
// #endif
},
//下载图片到本地
downloadH5(url) {
uni.downloadFile({
url: url, //仅为示例，并非真实的资源
success: (res) => {
console.log(res)
if (res.statusCode === 200) {
console.log('下载成功');
var oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名，默认是'下载'
oA.href = res.tempFilePath; //临时路径再保存到本地
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
}
});
},
//保存文档,不支持h5
saveFile(url) {
uni.showLoading()
uni.downloadFile({ //下载文件资源到本地,返回文件的本地临时路径
url: url, //网络图片路径
success: (res) => {
var filePath = res.tempFilePath;
//保存到本地
uni.saveFile({
tempFilePath: filePath,
success: function(res) {
//res.savedFilePath文件的保存路径
uni.openDocument({
filePath: res.savedFilePath,
fileType: 'pdf',
showMenu: true,
success: function(res) {
uni.hideLoading()
},
fail: function(err) {
uni.hideLoading()
}
});
},
fail() {
uni.hideLoading()
console.log('保存失败')
}
});
}
})
},
//微信小程序保存视频
getDownVideo(url) {
// 自定义 文件名称
uni.showLoading({
mask: true,
title: '下载中...'
})
let fileName = new Date().valueOf();
const task = uni.downloadFile({
url: url,
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4', // 拼接本地文件路径
success: (res) => {
let filePath = res.filePath
uni.saveVideoToPhotosAlbum({
filePath,
success: (res) => {
uni.showToast({
title: '下载成功',
icon: 'success',
})
let fileMgr = wx.getFileSystemManager();
// 删除本地文件
fileMgr.unlink({
filePath: wx.env.USER_DATA_PATH + '/' + fileName +
'.mp4',
success: function(r) {
console.log('unlink-getFileSystemManager')
console.log(r)
},
})
},
fail(err) {
uni.showToast({
title: '保存失败',
icon: 'none',
})
},
complete(res) {
console.log('saveVideoToPhotosAlbum-complete')
console.log(res)
uni.hideLoading()
}
})
},
fail(err) {
uni.showToast({
title: '下载失败,请稍后再试',
icon: 'none',
})
},
complete(res) {
console.log('downloadFiledownloadFiledownloadFiledownloadFiledownloadFile')
console.log(res)
}
})
task.onProgressUpdate(this.onProgress)
},
// 提示下载进度
onProgress(res) {
uni.showLoading({
mask: true,
title: res.progress ? '下载中' + res.progress + "%" : '下载中...'
})
},
saveVideoApp(url) {
// #ifdef APP-PLUS
var showLoading = plus.nativeUI.showWaiting("正在下载"); //创建一个showWaiting对象
// #endif
let task = uni.downloadFile({
url: url,
success: res => {
const {
statusCode,
tempFilePath
} = res
if (statusCode === 200) { // saveImageToPhotosAlbum saveVideoToPhotosAlbum
uni.saveImageToPhotosAlbum({ //此处也可用saveVideoToPhotosAlbum
filePath: tempFilePath,
success: data => {
console.log('data----------------->', data)
uni.showToast({
title: '下载成功,文件已保存到' + data.path,
icon: 'success',
})
},
complete: (msg) => {
// #ifdef APP-PLUS
plus.nativeUI.closeWaiting()
// #endif
}
});
} else {
uni.showToast({
title: '下载失败',
icon: 'none',
})
// #ifdef APP-PLUS
plus.nativeUI.closeWaiting()
// #endif
}
},
complete: () => {
}
})
task.onProgressUpdate((res => {
// console.log('上传进度' + res.progress);
// console.log('已经上传的数据长度' + res.totalBytesSent);
// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
showLoading.setTitle(" 正在下载" + res.progress + "% ");
}))
},
}
};
</script>
<style lang="scss" scoped>
.box {
padding: 20rpx 40rpx;
.imageBox {
width: 200rpx;
height: 200rpx;
}
.previewBtn {
height: 60rpx;
width: 200rpx;
padding: 24rpx;
border-radius: 16rpx;
background-color: #409eff;
color: #fff;
}
}
</style>
到了这里，关于uni-app移动端-H5-微信小程序下载保存图片，文档和视频到手机,带进度条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
