前言
使用uni-app开发微信小程序中,应用到保存图片到相册功能。通过调用getImageInfo()以及saveImageToPhotosAlbum()方法,电脑端和手机端均可保存到相册。今天uni.getImage开发时,uni.saveImageToPhotosAlbum模拟器保存正常,真机保存失败。出现*.unknown错误及saveImageToPhotosAlbum:fail invalid file type错误。
调试步骤如下:
1、调用 uni.downloadFile 下载图片 - 成功
2、调用 uni.previewImage 预览-成功
3、调用 uni.authorize 获取 scope.writePhotosAlbum 授权 - 成功
4、在模拟器上调用 uni.saveImageToPhotosAlbum 保存图片 - 成功
5、在真机上调用 uni.saveImageToPhotosAlbum 保存图片 - 失败
错误信息下图所示:
实现
1、调用uni.downloadFile()方法,在downloadFile中设置filePath,而不要使用默认的保存路径,然后 saveImageToPhotosAlbum使用filePath,即可完美解决。
2、由于下载的图片后缀不一致,不均是png格式,调用uni.getImageInfo()方法获取图片Url的后缀名。
具体演示代码
onSavePhoto(){
// #ifdef MP-WEIXIN
uni.getImageInfo({
src: _this.imageUrl,
success: function(e) {
// e.type=png/jpg 扩展名
// filePathNew: 指定文件下载后存储的路径 (本地路径)
var filePathNew = wx.env.USER_DATA_PATH + "/" + new Date().valueOf() +'.'+e.type;
uni.downloadFile({
url: _this.imageUrl, //仅为示例,并非真实的资源
filePath: filePathNew,
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: filePathNew,
success: function() {
uni.showToast({title: '保存到相册成功',icon: 'none',duration: 2200});
},
fail: function(err){
console.log('saveImageToPhotosAlbum() fail ', err)
}
});
}
}
});
},
complete: function(e) {
console.log('getImageInfo',e.path)
}
});
// #endif
}
微信小程序中保存到相册需要微信授权,授权逻辑如下:
openSetting() {
let _this = this;
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success(res) {
// 授权成功
uni.showToast({title: '授权成功',icon: 'none',duration: 2200});
_this.onSavePhoto();
},
fail() {
uni.showModal({
content: '检测到您没打开相册功能权限,是否去设置打开?',
confirmText: "确认",
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
if (res.authSetting['scope.writePhotosAlbum']) {
_this.onSavePhoto();
} else {
//用户未同意保存图片权限
}
},
fail: (err) => {
console.log(err)
}
})
} else {
uni.showToast({
title: '获取授权相册授权失败',
icon: 'none',
success: function() {
uni.navigateBack()
}
})
}
}
})
}
})
} else {
_this.onSavePhoto()
}
},
fail() {
uni.showToast({
title: '获取授权相机授权失败',
icon: 'none',
success: function() {
uni.navigateBack()
}
})
}
})
}