一:需要用到的API
1.uni.uploadFile(OBJECT) 将本地资源上传到开发者服务器
uni.uploadFile(OBJECT) | uni-app官网
2. uni.saveImageToPhotosAlbum(OBJECT) 保存图片到系统相册。
uni.chooseImage(OBJECT) | uni-app官网
注意:微信小程序在2023年10月17日之后,使用API需要配置隐私协议
二:配置:manifest.json
"mp-weixin": {"permission": {"scope.writePhotosAlbum": {"desc": "你的图片将保存到手机相册"}},},
(1)简单代码实现:
downSaveImage(imgurl) {uni.showModal({title: '保存图片',content: '是否保存当前图片?',success: (res) => {if (res.confirm) {uni.downloadFile({url: imgurl,//图片地址success: (res) => {if (res.statusCode === 200) {// console.log(res.tempFilePath,'res.tempFilePathres.tempFilePath');uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: '保存成功',duration: 2000,})},fail: function () {uni.showToast({title: '保存失败,请稍后重试',icon: 'none',})},})}},})} else if (res.cancel) {uni.showToast({title: "你取消了该操作",icon:'none',duration: 2000});}},})},
(2)用户授权完整的代码
if (res.authSetting['scope.writePhotosAlbum']) {// 用户已经授权,可以直接保存图片// ...
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {// 用户还没有授权,需要引导用户前往设置页面进行授权uni.showModal({title: '提示',content: '请前往设置页面授权保存图片',success: function (res) {if (res.confirm) {uni.openSetting({success: function (res) {// 用户授权成功,可以保存图片// ...},fail: function () {uni.showToast({title: '授权失败,请稍后重试',icon: 'none',})},})}},})
} else {// 用户已经拒绝授权,需要引导用户前往设置页面进行授权uni.showModal({title: '提示',content: '您已拒绝授权保存图片,请前往设置页面进行授权',success: function (res) {if (res.confirm) {uni.openSetting({success: function (res) {// 用户授权成功,可以保存图片// ...},fail: function () {uni.showToast({title: '授权失败,请稍后重试',icon: 'none',})},})}},})
}
(3)如果下载图片有误,代码分段判断筛选
uni.downloadFile({url: imgurl,success: (res) => {if (res.statusCode === 200) {// 下载成功uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: '保存成功',duration: 2000,})},fail: function () {uni.showToast({title: '保存失败,请稍后重试',icon: 'none',})},})} else {// 下载失败uni.showToast({title: '下载图片失败,请稍后重试',icon: 'none',})}},fail: function () {// 下载失败uni.showToast({title: '下载图片失败,请稍后重试',icon: 'none',})},
})
(4)判断是否授权调用授权再保存图片部分完整代码zh
downSaveImage(imgurl) {uni.showModal({title: '保存图片',content: '是否保存当前图片?',success: (res) => {if (res.confirm) {//获取用户授权uni.getSetting({success(res) {//如果已经授权if (res.authSetting['scope.writePhotosAlbum']) {// 用户授权成功,可以保存图片// ...} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {// 用户还没有授权,需要引导用户前往设置页面进行授权uni.showModal({title: '提示',content: '请前往设置页面授权保存图片',success: function (res) {if (res.confirm) {uni.openSetting({success: function (res) {uni.downloadFile({url: imgurl,success: (res) => {if (res.statusCode === 200) {// 下载成功uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: '保存成功',duration: 2000,})},fail: function () {uni.showToast({title: '保存失败,请稍后重试',icon: 'none',})},})} else {// 下载失败uni.showToast({title: 'else下载图片失败,请稍后重试',icon: 'none',})}},fail: function () {// 下载失败uni.showToast({title: 'fail下载图片失败,请稍后重试',icon: 'none',})},})},fail: function () {uni.showToast({title: '授权失败,请稍后重试',icon: 'none',})},})}},})} else {// 用户已经拒绝授权,需要引导用户前往设置页面进行授权uni.showModal({title: '提示',content: '您已拒绝授权保存图片,请前往设置页面进行授权',success: function (res) {if (res.confirm) {uni.openSetting({success: function (res) {// 用户授权成功,可以保存图片// ...},fail: function () {uni.showToast({title: '授权失败,请稍后重试',icon: 'none',})},})}},})}},})} else if (res.cancel) {uni.showToast({title: '你取消了该操作',icon: 'none',duration: 2000,})}},})},
注:项目中如果图片地址是后台返回的临时地址,在微信小程序模拟器返回的地址开头是
http://tmp/.......jpg
但是真机上调试返回图片地址开头是
wxfile://tmp/......jpg
这可能是因为开发版的域名没有配置正确导致的。在开发版中,小程序的文件系统是虚拟的,而在正式版中,小程序的文件系统是真实存在的。因此,在开发版中,图片的路径可能会与正式版中不同