微信小程序实现多图片下载

本文主要是介绍微信小程序实现多图片下载，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.实现效果

2.实现思路

wx.getSetting:获取用户授权。
wx.downloadFile：下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。
wx.saveImageToPhotosAlbum：保存文件到本地。

3.实现步骤

1.设置一个can_click参数，防止重复点击。
2.对图片数组进行处理，当选中图片之后，设置改项为选中状态，显示选中状态（蒙层+选中），并将选中项push进一个新数组。
3.点击保存，判断新数组长度，小于0 ，大于9提示，否则进行图片保存。
4.保存完毕（或保存出错），清空数组并清除选中状态。

4.实现代码

<view class="img_box">
  <block wx:for="{{img_list}}" wx:key="index">
    <view class="img_item" catchtap="choseOne" data-index="{{index}}">
      <image src="{{item.icon}}" class="img_img" />
      <view class="item_check {{item.checked && 'checked'}}"></view>
      <!-- 蒙层 -->
      <view class=" {{item.checked && 'item_mask'}}"></view>
    </view>
  </block>
</view>
<view class="btn" catchtap="saveTo">保存到相册</view>

/* pages/wxCase/downFile/index.wxss */
page {
  background-color: #fff;
}

.img_box {
  padding: 0 20rpx;
  box-sizing: border-box;
  display: grid;
  width: 100%;
  /* 相当于 1fr 1fr 1fr */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: row;
  /* grid-column-gap 和 grid-row-gap的简写 */
  grid-column-gap: 26rpx;
  grid-row-gap: 23rpx;
}

.img_item {
  width: 220rpx;
  height: 220rpx;
  position: relative;
}


.img_img {
  width: 100%;
  height: 100%;
}

.item_check {
  position: absolute;
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  border: 3rpx solid #f5ecec;
  right: 10rpx;
  top: 10rpx;
  z-index: 11;
}

.checked {
  background: #acd0e0;
  border: none;
  position: absolute;
}

.checked::after {
  position: absolute;
  width: 4px;
  height: 8px;
  border-width: 0 2px 2px 0;
  border-color: #fff;
  border-style: solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: '';
  left: 31%;
  top: 10%;
}

.item_mask {
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0, 0.4);
}

.btn {
  margin: 140rpx auto;
  width: 625rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #dd8449 0%, #e28e74 52%, #dbb290 100%);
  border-radius: 6rpx;
  font-size: 30rpx;
  color: #fff;
  line-height: 80rpx;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.btn:after {
  content: "";
  background: #999;
  position: absolute;
  width: 750rpx;
  height: 750rpx;
  left: calc(50% - 375rpx);
  top: calc(50% - 375rpx);
  opacity: 0;
  margin: auto;
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.4s ease-in-out;
}

.btn:active:after {
  transform: scale(0);
  opacity: 1;
  transition: 0s;
}

// pages/wxCase/downFile/index.js
import {
  writePhotosAlbum
} from '../../../utils/util'
Page({
  data: {
    img_list: [{
      icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg'
    },
    {
      icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg'
    },
    {
      icon: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg'
    },
    {
      icon: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg'
    },
    {
      icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg'
    },
    {
      icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg'
    },
    {
      icon: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg'
    },
    {
      icon: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg'
    },
    {
      icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg'
    },
    {
      icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg'
    },
    ],
    checkd_list: [],

  },
  can_click:true,
  choseOne(e) {
    let {
      index
    } = e.currentTarget.dataset, {
      img_list,
    } = this.data;
    img_list[index].checked = !img_list[index].checked;
    let checkd_list = img_list.filter((item) => {
      return item.checked && item
    })
    this.setData({
      img_list,
      checkd_list
    })
  },
  saveTo() {
    if (this.data.checkd_list.length === 0) {
      return wx.showToast({
        title: '请选择需要保存的图片',
        icon: 'none'
      })
    }
    if (this.data.checkd_list.length > 9) {
      return wx.showToast({
        title: '同时最多只能保存9张图片',
        icon: 'none'
      })
    }
    if (this.can_click) {
      console.log(1111)
      this.can_click=false;
      var that = this;
      writePhotosAlbum(
        function success() {
          that.downForque(that.data.checkd_list).then(res => {
            wx.hideLoading()
            wx.showToast({
              title: '下载完成',
              icon: 'none'
            })
            that.data.img_list.forEach(item => {
              item.checked = false;
            })
            that.setData({
              img_list: that.data.img_list
            })
            that.data.checkd_list = [];
            that.can_click=true;
          }).catch(err => {
            that.data.img_list.forEach(item => {
              item.checked = false;
            })
            that.setData({
              img_list: that.data.img_list
            })
            that.data.checkd_list = []
            wx.hideLoading();
            that.can_click=true;
          })
        },
        function fail() {
          wx.showToast({
            title: '您拒绝了保存到相册',
            icon: 'none'
          })
        }
      )
    }
  },
  // 队列
  downForque(urls) {
    let promise = Promise.resolve()
    urls.forEach((url, index) => {
      promise = promise.then(() => {
        return this.download(url.icon, index)
      })
    })
    return promise;
  },
  download(url, index) {
    let length = this.data.checkd_list.length
    return new Promise((resolve, reject) => {
      wx.downloadFile({
        url: url,
        success: function (res) {
          var temp = res.tempFilePath
          wx.saveImageToPhotosAlbum({
            filePath: temp,
            success: function (res) {
              wx.showLoading({
                title: '下载中(' + (index + 1) + '/' + length + ')'
              })
              resolve(res)
            },
            fail: function (err) {
              reject(res)
            }
          })
        },
        fail: function (err) {
          reject(err)
        }
      })
    })
  },
})

4.更多代码，关注苏苏的码云。

这篇关于微信小程序实现多图片下载的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！