微信小程序一次性保存多张图片

微信小程序一次性保存多张图片

.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;
}

有什么问题欢迎评论留言，我会及时回复你的