提示：本人亲测可直接使用
一、封装下载js文件 download.js？
const app = getApp()
export default {
/**
* 保存图片
* url 图片url地址
* is_video是否视频
*/
saveImage: function(url,is_video) {
let that = this;
// 向用户发起授权请求
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
// 已授权
that.downLoadImg(url,is_video);
},
fail: () => {
// 拒绝授权，获取当前设置
uni.getSetting({
success: (result) => {
if (!result.authSetting['scope.writePhotosAlbum']) {
that.isAuth()
}
}
});
}
})
},
/**
* 下载资源，保存图片到系统相册
*/
downLoadImg: function(url,is_video) {
uni.showLoading({
title: '加载中'
});
uni.downloadFile({
url : url,
success: (res) => {
uni.hideLoading();
if (res.statusCode === 200) {
if(is_video==false){
// 图片下载
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: "已保存到相册",
icon: "none"
});
},
fail: function() {
uni.showToast({
title: "保存失败，请稍后重试",
icon: "none"
});
}
});
}else{
// 视频下载
uni.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: "已保存到相册",
icon: "none"
});
},
fail: function() {
uni.showToast({
title: "保存失败，请稍后重试",
icon: "none"
});
}
})
}
}else {
uni.showToast({title:"资源格式错误，请联系管理员",icon: "none"});
}
},
fail: (err) => {
uni.showToast({title: "保存失败，请联系管理员",icon: "none"});
}
})
},
/*
* 引导用户开启权限
*/
isAuth: function() {
uni.showModal({
content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (result) => {
console.log(result.authSetting);
}
});
}
}
});
},
}
二、使用
1.在 main.js引用
import imgDown from "./utils/download.js"
Vue.prototype.$imgDown = imgDown
2.页面使用
url: http 图片/视频
is_video：false图片下载 true视频下载
this.$imgDown.saveImage(url,is_video)
总结
提示：这是使用的小程序，可以去体验文章来源：https://www.toymoban.com/news/detail-515253.html
文章来源地址https://www.toymoban.com/news/detail-515253.html
到了这里，关于使用uniapp实现小程序图片和视频的下载功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
