资讯专栏INFORMATION COLUMN

小程序保存多张图片

Java_oldboy / 532人阅读

摘要:前言使用队列,保存多张图片到手机相册问题有些手机会出现只能保存五张图片,报错信息无法写入需要好好学习核心代码页面的初始数据生命周期函数监听页面加载下载图片获取保存到相册权限加载中调用保存图片队列下载完成您拒绝了保存到相册队列下载项目案例

前言

使用promise 队列,保存多张图片到手机相册
问题:有些手机会出现只能保存五张图片,报错信息:无法写入
promise需要好好学习

核心代码
// pages/saveImgs/index.js
import { writePhotosAlbum } from "../../utils/util"
Page({
  /**
   * 页面的初始数据
   */
  data: {
    list: [
      "https://timgs.top1buyer.com/admin/special/special_img_20190301160008479.jpg",
      "https://timgs.top1buyer.com/admin/special/special_img_20190301160013201.jpg",
      "https://timgs.top1buyer.com/admin/special/special_img_20190301160015969.jpg",
      "https://timgs.top1buyer.com/admin/special/special_img_20190301160025498.jpg",
      "https://timgs.top1buyer.com/admin/special/special_img_20190301160031519.jpg",
      "https://timgs.top1buyer.com/admin/special/special_img_20190301160042689.jpg",
      "https://timgs.top1buyer.com/admin/special/special_img_20190301160108243.jpg",
      "https://timgs.top1buyer.com/admin/special/special_img_20190301160111756.jpg",
      "https://timgs.top1buyer.com/admin/special/special_img_20190304160141454.jpg"
    ],
    loading:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},
  // 下载图片
  downloadImgs() {
    var _this = this
    // 获取保存到相册权限
    writePhotosAlbum(
      function success() {
        wx.showLoading({
          title: "加载中",
          mask: true
        })
        // 调用保存图片promise队列
        _this
          .queue(_this.data.list)
          .then(res => {
            wx.hideLoading()
            wx.showToast({
              title: "下载完成"
            })
          })
          .catch(err => {
            wx.hideLoading()
            console.log(err)
          })
      },
      function fail() {
        wx.showToast({
          title: "您拒绝了保存到相册"
        })
      }
    )
  },
  // 队列
  queue(urls) {
    let promise = Promise.resolve()
    urls.forEach((url, index) => {
      promise = promise.then(() => {
        return this.download(url)
      })
    })
    return promise
  },
  // 下载
  download(url) {
    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) {
              reject(res)
            }
          })
        },
        fail: function(err) {
          reject(err)
        }
      })
    })
  }
})

项目案例

github地址

git clone https://github.com/sunnie1992/soul-weapp.git

直接用微信小程序开发工具打开就可以看到案例了

如果对你有帮助送我一颗小星星(づ ̄3 ̄)づ╭❤~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102366.html

相关文章

  • 程序—九宫格心形拼图

    摘要:而微信小程序中也刚好有进度条这个组件。推荐和意见反馈推荐给朋友意见反馈这个两个功能就是用了,微信小程序的组件,这里需要注意的就是,在清除的默认样式时,需要把的伪元素的边框也去掉。总结这次做的这个九宫格心形拼图的小程序,第一版已经上线了。 说明 前几天在朋友圈看到好几次这种图片。 showImg(https://segmentfault.com/img/bVbeAoX?w=321&h=3...

    myeveryheart 评论0 收藏0
  • Android保存多张图片到本地

    摘要:如果用户点击保存按钮,则保存若干张图片到本地。这个时候,如果点击保存控件,则循环遍历图片资源集合保存到本地文件夹。如果是线程套线程的话,第一个子线程结束了,嵌套在该子线程的循环内的子线程还没结束,从而主线程获取不到子线程里获取的图片。 目录介绍 01.实际开发保存图片遇到的问题 02.直接用http请求图片并保存本地 03.用glide下载图片保存本地 04.如何实现连续保存多张图片...

    thursday 评论0 收藏0
  • [拆弹时刻]程序canvas生成海报(二)---优化方案

    摘要:注意如果用户一开始没有微信授权,生成海报时又必须要用户头像不能使用默认的话,那就只能老老实实走之前的流程了。组件名称终端类型微信版本触发方法关于的调用方法相册权限需要你提供保存相册权限获取相册权限成功,给出再次点击图片保存到相册的提示。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海报生成示例 海报生成速度缓慢...

    LittleLiByte 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<