小程序下载多张图片到本地

业务背景：实现在小程序原生页面中同时下载多张图片到本地

类似下图效果：

话不多说，上菜，粘过去直接用，亲测有效

wxml:

<view>
  <view class="toast" wx:if="{{list_show}}">
      下载中{{currentindex}}/{{list.length}} 
      <view class="prograss">
        <progress class="pro" percent="{{percents}}"  stroke-width="3"/>
      </view>
  </view>
  <button bindtap="download">下载图片</button>
  <view class="">
      <image class=""  wx:for="{{list}}" wx:key="index" style="width:250rpx;height:250rpx;" src="{{item}}">
      </image>
  </view>
</view>

wxss：

.toast{
  position: fixed;
  width: 260rpx;
  height: 260rpx;
  font-size: 35rpx;
  z-index: 100;
  background: rgba(0, 0, 0, .8);
  color: skyblue;
  left: 50%;
  top: 50%;
  margin-left: -130rpx;
  margin-top: -130rpx;
  line-height: 260rpx;
  text-align: center;
}
.prograss{
  position: fixed;
  width: 260rpx;
  height: 260rpx;
  font-size: 35rpx;
  color: skyblue;
  left: 50%;
  top: 50%;
  margin-left: -130rpx;
  margin-top: 62rpx;
  line-height: 260rpx;
  text-align: center;
}
.pro{
  width: 200rpx;
  margin: 0 auto;
}

js：

Page({
  data: {
    list: [
      'https://img.miyabaobei.com/d1/p6/2020/12/31/43/0e/430e1e8565c04ad552d4a3b8e746e8aa051198951.png',
      'http://img.miyabaobei.com/d1/p6/2020/12/31/7a/45/7a451174e6cfc9ae002aed1cd56689a8062286441.jpg',
      'http://img.miyabaobei.com/d1/p6/2020/12/31/df/e3/dfe3b9db0030b463bbeb812848b4557d060606649.jpg',
      'http://img.miyabaobei.com/d1/p6/2020/12/31/fc/57/fc57a81843502ce926c4aca75466d1ba061073348.jpg',
      'http://img.miyabaobei.com/d1/p6/2020/12/31/6e/30/6e30f0e30b37d07b7c40a350721adee9061784632.jpg',
      'http://img.miyabaobei.com/d1/p6/2020/12/31/d7/c7/d7c7d7391073186ab2464efa8991de86061457539.jpg',
      'http://img.miyabaobei.com/d1/p6/2020/12/31/9e/39/9e394f0ad08b53ff85c00f4dd06973d0062045938.jpg',
      'http://img.miyabaobei.com/d1/p6/2020/12/31/0a/24/0a24748279c5efb36b849d83f47e36eb062638187.jpg',
      'http://img.miyabaobei.com/d1/p6/2020/12/31/11/64/11643b42380448a370e6713f7236fb91060873646.jpg',
     ],
     list_show:false,
     currentindex:0,
     percents:0
  },
  onLoad: function (options) {
  },
  download:function(){
    this.downloadFile(this.data.list).then(res => {
      this.setData({
        list_show:false,
      })
      wx.showToast({
       title: '下载完成'
      })
     })
  },
  downloadFile(urls) {
    this.setData({
      list_show:true,
    })
    let promise = Promise.resolve()
    urls.forEach((url, index) => {
     promise = promise.then(() => {
        var ever = (10/urls.length)*10
        this.setData({
          currentindex: index+1,
          percents: (index+1)*ever
        })
      return this.downloads(url)
     })
    })
    return promise
   },
   downloads:function(url){
     let that = this
    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) {
           that.setData({
            list_show:false,
          })
         }
        })
       },
       fail: function(err) {
        console.log(err,"err2222")
        reject(err)
       }
      })
     })
  },
})

说明：只是初步实现了效果，可能不是很完善，欢迎大佬讨论交流

觉得不错，赏个关注呗

本文地址：https://blog.csdn.net/lzz123987csdn/article/details/112024214