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

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

雷同下图效果：

话不多说，上菜，粘已往直接用，亲测有效
wxml:

1.         下载中{{currentindex}}/{{list.length}}                         下载图片               

复制代码

wxss：

1. .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：

1. 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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！