【微信小程序】保存多张图片到本地相册 wx.saveImageToPhotosAlbum
这里写目录标题
- 微信小程序检测是否有存储权限
- wx.getSetting
- 图片上传
- 从HTML中提取img标签的src属性
- 多图片下载
微信小程序检测是否有存储权限
wx.getSetting
上传前判断是否开启存储权限,如果不检测直接上传会出现fail的情况
var _this = this
wx.getSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
// 已获得存储相册授权
_this.writeInImg()
}
else {
// 未获得存储相册授权
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: () => {
wx.openSetting({
success(settingdata) {
//再进行图片上传操作
_this.writeInImg()
}
})
}
})
}
}
})
图片上传
从HTML中提取img标签的src属性
后端返回一个字符串,内容是标签,img,需要截取出src中的图片链接,
getImage(){
const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g
const result = [...this.data.details.goods_content.matchAll(srcRegex)]
const imgSrcs = result.map(v => v[2])
return imgSrcs[0]
},
多图片下载
Page({
/**
* 页面的初始数据
*/
data: {
imgList: [
'https://tys.zye.com/upload/1/common/20231110/207169967318.jpg',
'https://tys.zye.com/upload/1/common/20231110/207169967318.jpg',
'https://tys.zye.com/upload/1/common/20231110/207169967318.jpg',
],
}
writeInImg() {
let imgList = this.data.imgList
let imglength = imgList.length; // 要下载的总条数
let index = 0;
wx.showLoading({
title: '加载中',
})
for (let i = 0; i < imgList.length; i++) {
wx.downloadFile({
url: imgList[i],
success: function(res) {
var temp = res.tempFilePath
wx.saveImageToPhotosAlbum({
filePath: temp,
success(res) {
index++;
// 全部下载完后触发
if (index == imglength) {
wx.hideLoading();
wx.showToast({
title:'下载成功',
icon:'success',
duration:2000
})
}
},
fail(err){
wx.hideLoading();
console.log('下载失败')
}
})
}
})
}
},