微信小程序一次性保存多张图片
.js
import { writePhotosAlbum } from '../../utils/imagein.js'
Page({
data: {
images:[
'https://test.milebao.top/resources/imgs/2019121816180115766570818522.png',
'https://test.milebao.top/resources/imgs/2019121816180115766570818522.png',
'https://test.milebao.top/resources/imgs/2019121816180115766570818522.png',
'https://test.milebao.top/resources/imgs/2019121816180115766570818522.png',
'https://test.milebao.top/resources/imgs/2019121816180115766570818522.png',
'https://test.milebao.top/resources/imgs/2019121816180115766570818522.png',
]
},
//图片预览
imagxin: function (e) {
let that = this
let index = e.currentTarget.dataset.index
let images = that.data.images[index]
wx.previewImage({
current: images, // 当前显示图片的http链接
urls: [images] // 需要预览的图片http链接列表
})
},
// 下载图片
downloadImgs() {
var that = this
// 获取保存到相册权限
writePhotosAlbum(
function success() {
wx.showLoading({
title: '加载中',
mask: true
})
// 调用保存图片promise队列
that
.queue(that.data.images)
.then(res => {
wx.hideLoading()
wx.showToast({
title: '下载完成'
})
})
.catch(err => {
wx.hideLoading()
console.log(err)
})
},
function fail() {
wx.showToast({
title: '您拒绝了保存到相册'
})
}
)
},
// 队列
queue(urls) {
let promise = Promise.resolve()
urls.forEach((url, index) => {
promise = promise.then(() => {
return this.download(url)
})
})
return promise
},
// 下载
download(url) {
return new Promise((resolve, reject) => {
wx.downloadFile({
url: url,
success: function (res) {
var temp = res.tempFilePath
wx.saveImageToPhotosAlbum({
filePath: temp,
success: function (res) {
resolve(res)
},
fail: function (err) {
reject(res)
}
})
},
fail: function (err) {
reject(err)
}
})
})
}
})
.wxml
<view bindtap="downloadImgs">下载图片</view>
<view style="width: 25%;padding: 10rpx;float: left;overflow: hidden;height: 160rpx;" wx:for="{{images}}" data-index="{{index}}" bindtap="imagxin" wx:key>
<image style="width: 100%;height: 100%;" src="{{item}}"></image>
</view>
imagein.js
//保存图片到相册
export const writePhotosAlbum = (successFun, failFun) => {
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: function () {
successFun && successFun()
},
fail: function (res) {
wx.hideLoading()
wx.showModal({
title: '提示',
content: "小程序需要您的微信授权保存图片,是否重新授权?",
showCancel: true,
cancelText: "否",
confirmText: "是",
success: function (res2) {
if (res2.confirm) { //用户点击确定'
wx.openSetting({
success: (res3) => {
if (res3.authSetting['scope.writePhotosAlbum']) {
//已授权
successFun && successFun()
} else {
failFun && failFun()
}
}
})
} else {
failFun && failFun()
}
}
});
}
})
} else {
successFun && successFun()
}
}
})
}
/**
* 深度对比两个对象是否一致
* from: https://github.com/epoberezkin/fast-deep-equal
* @param {Object} a 对象a
* @param {Object} b 对象b
* @return {Boolean} 是否相同
*/
/* eslint-disable */
export const equal = (a, b) => {
if (a === b) return true;
if (a && b && typeof a == 'object' && typeof b == 'object') {
var arrA = Array.isArray(a)
, arrB = Array.isArray(b)
, i
, length
, key;
if (arrA && arrB) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0;)
if (!equal(a[i], b[i])) return false;
return true;
}
if (arrA != arrB) return false;
var dateA = a instanceof Date
, dateB = b instanceof Date;
if (dateA != dateB) return false;
if (dateA && dateB) return a.getTime() == b.getTime();
var regexpA = a instanceof RegExp
, regexpB = b instanceof RegExp;
if (regexpA != regexpB) return false;
if (regexpA && regexpB) return a.toString() == b.toString();
var keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length)
return false;
for (i = length; i-- !== 0;)
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
for (i = length; i-- !== 0;) {
key = keys[i];
if (!equal(a[key], b[key])) return false;
}
return true;
}
return a !== a && b !== b;
}
/**
* 判断一个 object 是否为 空
* @param {object} object
*/
export const isEmpty = (object) => {
for (const i in object) {
return false;
}
return true;
}
有什么问题欢迎评论留言,我会及时回复你的