当前位置: 首页 > article >正文

【微信小程序】保存多张图片到本地相册 wx.saveImageToPhotosAlbum

这里写目录标题

  • 微信小程序检测是否有存储权限
    • wx.getSetting
  • 图片上传
    • 从HTML中提取img标签的src属性
    • 多图片下载

微信小程序检测是否有存储权限

wx.getSetting

上传前判断是否开启存储权限,如果不检测直接上传会出现fail的情况

var _this = this
wx.getSetting({
      success(res) {
        if (res.authSetting['scope.writePhotosAlbum']) {
          // 已获得存储相册授权
          _this.writeInImg()
        }
        else {
          // 未获得存储相册授权
          wx.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            showCancel: false,
            success: () => {
              wx.openSetting({
                success(settingdata) {
                //再进行图片上传操作
                  _this.writeInImg()
                }
              })
            }
          })
        }
      }
    })

图片上传

从HTML中提取img标签的src属性

后端返回一个字符串,内容是标签,img,需要截取出src中的图片链接,

 getImage(){
    const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g
    const result = [...this.data.details.goods_content.matchAll(srcRegex)]
    const imgSrcs = result.map(v => v[2])
    return imgSrcs[0]
  },

多图片下载

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgList: [
    	'https://tys.zye.com/upload/1/common/20231110/207169967318.jpg',
    	'https://tys.zye.com/upload/1/common/20231110/207169967318.jpg',
    	'https://tys.zye.com/upload/1/common/20231110/207169967318.jpg',	
    ],
}

writeInImg() {
    let imgList = this.data.imgList 
    let imglength = imgList.length; // 要下载的总条数
    let index = 0;
    
    wx.showLoading({
      title: '加载中',
    })
    for (let i = 0; i < imgList.length; i++) {
      wx.downloadFile({
        url: imgList[i],
        success: function(res) {
          var temp = res.tempFilePath
          wx.saveImageToPhotosAlbum({
            filePath: temp,
            success(res) {
              index++;
              // 全部下载完后触发
              if (index == imglength) {
                wx.hideLoading();
                wx.showToast({
                  title:'下载成功',
                  icon:'success',
                  duration:2000
                })
              }

            },
            fail(err){
              wx.hideLoading();
              console.log('下载失败')
            }
          })
        }
      })
    }
  },


http://www.kler.cn/news/160084.html

相关文章:

  • 分支和循环
  • 目标检测——R-CNN算法解读
  • web理论测试
  • Insomnia -- 非常nice的开源 API 调试工具
  • Camunda 7.x 系列【57】流程设计器
  • Axios详解及运用案例
  • 详细学习PyQt5中的多线程
  • ubuntu下QT搭建Android开发环境
  • Linux C语言 42-进程间通信IPC之网络通信(套接字)
  • 基于springboot+vue篮球联盟管理系统源码
  • 基于Vue.js的厦门旅游电子商务预订系统的设计和实现
  • String转Date,Date转String
  • ElasticSearch之Search settings
  • MongoDB导入导出命令
  • 配置OSS后如何将服务器已有文件上传至OSS,推荐使用ossutil使用
  • C++ 红黑树的封装
  • selinux-policy-default(2:2.20231119-2)软件包内容详细介绍(6)
  • 虚拟化逻辑架构:OVS 交换机与端口管理
  • TCP_报文格式解读
  • unity旋转选中效果
  • 前端入门(四)Ajax、Promise异步、Axios通信、vue-router路由、组件库
  • 软著项目推荐 深度学习图像风格迁移 - opencv python
  • unity | 动画模块之循环滚动选项框
  • pillow opencv matplotlib读写图片有什么区别
  • C语言——计算Fibonacci数列
  • 西工大计算机学院计算机系统基础实验一(函数编写1~10)
  • MyBatis-xml版本
  • java面试题,上楼梯有多少种方式
  • 一对一聊天
  • CMMI5大成熟度等级和4大过程域