前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序一键保存多张图片

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

作者头像
明知山
发布2020-09-03 10:49:54
2.9K7
发布2020-09-03 10:49:54
举报
文章被收录于专栏:前端开发随笔前端开发随笔
代码语言:javascript
复制
<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>
代码语言:javascript
复制
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
        })
      }
    })
  },
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-11-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档