专栏首页前端开发随笔微信小程序一键保存多张图片

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

<view class="info">
    <block wx:for="{{dynamic_list}}" wx:for-item="item" wx:key="index">
        <view class="row">
            <view class="tulie" wx:for="{{item.file}}" wx:for-item="row" wx:key="key" wx:for-index="i">
                <image src="{{row.img_url}}"></image>
            </view>
        </view>
        <button data-index="{{index}}" bindtap="download">一键保存到相册</button>
        <view class="progress" wx:if="{{schedule}}">
            <progress percent="{{percent}}" duration="1" activeColor="#4aad8f" border-radius="10" stroke-width="12"
                show-info />
        </view>
    </block>
</view>
Page({
  data: {
    dynamic_list: [{
      file: [{
        img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191123112141-2.png'
      }, {
        img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121151131-1.png'
      }, {
        img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121151131-2.png'
      }, {
        img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121100950-3.png'
      }, {
        img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-2.png'
      }]
    }],
    percent: 0,
    schedule: false
  },

  // 下载图片到本地相册
  download(e) {
    let index = e.currentTarget.dataset.index
    this.getsave(0, this.data.dynamic_list[index].file.length, index)
  },
  getsave(i, length, index) {
    wx.showLoading({
      title: '下载中(' + (i + 1) + '/' + length + ')',
    })
    const downloadTask = wx.downloadFile({
      url: this.data.dynamic_list[index].file[i].img_url,
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: (res) => {
            if (i + 1 == length) {
              wx.showToast({
                title: '保存成功',
              });
            }
            wx.hideLoading()
            if (++i < length) {
              this.getsave(i, length, index);
            }
          },
          fail: (err) => {
            wx.showToast({
              title: '保存图片失败',
              icon: 'none',
            })
          },
        })
      },
    })
    // 下载进度
    downloadTask.onProgressUpdate((res) => {
      console.log(res)
      if (res.progress > 0) {
        this.setData({
          schedule: true,
          percent: res.progress
        })
      }
      if (res.progress == 100) {
        this.setData({
          schedule: false
        })
      }
    })
  },
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Js微信公众号引JS-SDK调起微信支付

    wePanda
  • 微信小程序封装api接口

    wePanda
  • 微信小程序处理pages的函数比app.js先执行

    我需要先执行app.js里wx.login获取到参数再赋值给页面接口, 问题 页面函数比app.js要先执行 使用promise app.js wxR...

    wePanda
  • leetcode-821-Shortest Distance to a Character

    chenjx85
  • Python急转弯-6-面试篇

    题目:输入一个正整数,按照从小到大的顺序输出它的所有质数的因子(如180的质数因子为2 2 3 3 5 ),最后一个数后面也要有空格。

    小团子
  • 1000道Python题库系列分享十一(9道)

    Python小屋屋主
  • 小程序---微信本地存储的方法使用

    需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

    半指温柔乐
  • Appium自动化(6) - 控件定位工具之uiautomatorviewer 的详细介绍

    https://www.cnblogs.com/poloyy/category/1693896.html

    小菠萝测试笔记
  • 《3》 python语言基础知识

    「3」python语言基础知识 Python是一种计算机编程语言。计算机编程语言和我们日常使用的自然语言有所不同,最大的区别就是,自然语言在不同的语境下有不同的...

    企鹅号小编
  • Python——量化分析常用命令介绍(四)

    上节课提到的MongoDB,其实安装很简单的,前几天下载页面打不开,无形中放大了心里阴影面积

    Ed_Frey

扫码关注云+社区

领取腾讯云代金券