uniapp 封装将网络路径图片保存至相册的方法
2023-07-13 18:23:35 95浏览
获取图片信息(从而获取图片本地路径)- 保存图片到系统相册。
涉及的 uniapp API
uni.getImageInfo - 获取图片信息(从而获取图片本地路径)这个 API 也可以更换为 uni.downloadFile
uni.saveImageToPhotosAlbum - 保存图片到系统相册
封装的方法(vue3)
const saveImg = (netUrl) => {
if(!netUrl) return
uni.showLoading({
title: '保存图片中...'
})
// 获取图片信息
uni.getImageInfo({
src: netUrl,
success(res) {
// console.log('获取图片信息', res);
// 再将图片保存到本地
uni.saveImageToPhotosAlbum({
filePath: res.path,
success(data) {
uni.hideLoading()
uni.showToast({
title: '图片保存成功'
})
},
fail(err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err
.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
"saveImageToPhotosAlbum:fail authorize no response") {
// 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata",
settingdata)
if (settingdata.authSetting[
'scope.writePhotosAlbum'
]) {
wx.showModal({
title: '提示',
content: '获取权限成功,请重新下载图片',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败,将无法保存到相册哦~',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData", failData)
},
complete(finishData) {
console.log("finishData",
finishData)
}
})
}
})
}
},
complete(res) {
uni.hideLoading()
}
})
},
fail(err) {
// console.error('下载资源失败', err);
uni.hideLoading()
}
})
}
方法使用示例
saveImg(res.data[0].url) // 参数是网络图片途径
好博客就要一起分享哦!分享海报
此处可发布评论
评论(0)展开评论
暂无评论,快来写一下吧
展开评论