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

本文主要是介绍【微信小程序】保存多张图片到本地相册 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/gconst 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.tempFilePathwx.saveImageToPhotosAlbum({filePath: temp,success(res) {index++;// 全部下载完后触发if (index == imglength) {wx.hideLoading();wx.showToast({title:'下载成功',icon:'success',duration:2000})}},fail(err){wx.hideLoading();console.log('下载失败')}})}})}},

这篇关于【微信小程序】保存多张图片到本地相册 wx.saveImageToPhotosAlbum的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/464007

相关文章

Java使用Spire.Doc for Java实现Word自动化插入图片

《Java使用Spire.DocforJava实现Word自动化插入图片》在日常工作中,Word文档是不可或缺的工具,而图片作为信息传达的重要载体,其在文档中的插入与布局显得尤为关键,下面我们就来... 目录1. Spire.Doc for Java库介绍与安装2. 使用特定的环绕方式插入图片3. 在指定位

使用C#导出Excel数据并保存多种格式的完整示例

《使用C#导出Excel数据并保存多种格式的完整示例》在现代企业信息化管理中,Excel已经成为最常用的数据存储和分析工具,从员工信息表、销售数据报表到财务分析表,几乎所有部门都离不开Excel,本文... 目录引言1. 安装 Spire.XLS2. 创建工作簿和填充数据3. 保存为不同格式4. 效果展示5

Python多任务爬虫实现爬取图片和GDP数据

《Python多任务爬虫实现爬取图片和GDP数据》本文主要介绍了基于FastAPI开发Web站点的方法,包括搭建Web服务器、处理图片资源、实现多任务爬虫和数据可视化,同时,还简要介绍了Python爬... 目录一. 基于FastAPI之Web站点开发1. 基于FastAPI搭建Web服务器2. Web服务

Mysql 驱动程序的程序小结

《Mysql驱动程序的程序小结》MySQL驱动程序是连接应用程序与MySQL数据库的重要组件,根据不同的编程语言和应用场景,MySQL提供了多种驱动程序,下面就来详细的了解一下驱动程序,感兴趣的可以... 目录一、mysql 驱动程序的概念二、常见的 MySQL 驱动程序1. MySQL Connector

利用Python将PDF文件转换为PNG图片的代码示例

《利用Python将PDF文件转换为PNG图片的代码示例》在日常工作和开发中,我们经常需要处理各种文档格式,PDF作为一种通用且跨平台的文档格式,被广泛应用于合同、报告、电子书等场景,然而,有时我们需... 目录引言为什么选择 python 进行 PDF 转 PNG?Spire.PDF for Python

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

java程序远程debug原理与配置全过程

《java程序远程debug原理与配置全过程》文章介绍了Java远程调试的JPDA体系,包含JVMTI监控JVM、JDWP传输调试命令、JDI提供调试接口,通过-Xdebug、-Xrunjdwp参数配... 目录背景组成模块间联系IBM对三个模块的详细介绍编程使用总结背景日常工作中,每个程序员都会遇到bu

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

Git打标签从本地创建到远端推送的详细流程

《Git打标签从本地创建到远端推送的详细流程》在软件开发中,Git标签(Tag)是为发布版本、标记里程碑量身定制的“快照锚点”,它能永久记录项目历史中的关键节点,然而,仅创建本地标签往往不够,如何将其... 目录一、标签的两种“形态”二、本地创建与查看1. 打附注标http://www.chinasem.cn

Android实现图片浏览功能的示例详解(附带源码)

《Android实现图片浏览功能的示例详解(附带源码)》在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码