请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
八步半的房间 发表于 2021-1-1 18:34:35 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
   业务配景:实现在小步伐原生页面中同时下载多张图片到本地
雷同下图效果:

话不多说,上菜,粘已往直接用,亲测有效
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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )