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

实现功能：点击‘保存图片’可以将商品的所有图片以及商品的海报图片保存到相册中

由于downloadFile一次只能下载一张图片，因此需要依次遍历图片数组，将图片逐一保存

// 一键保存所有图片oneSaveImg() {// 首先判断用户是否登录if (this.$isLogin()) {uni.showLoading({title:"保存中"})//遍历接口返回值 将返回值push到数组中for(let i = 0; i < this.goodsInfo.gallery_list.length;i++){ //防止用户多次点击，判断原数组中是否存在图片，不存在则pushif(this.shopArr.length>=this.goodsInfo.gallery_list.length) break;this.shopArr.push(this.goodsInfo.gallery_list[i].img_url)}let price = this.goodsInfo.goods_price || this.goodsInfo.shop_pricethis.$store.dispatch('setGoodsShare', { //请求接口 获取海报图片goods_id: this.goods_id,price: price,share_type: this.goodsInfo.is_distribution,platform: uni.getStorageSync('platform'),shop_id: uni.getStorageSync('shop_id')}).then(res => {if (res.status == 'success') {this.shareImg = res.data,this.shopArr.push(this.shareImg)let url = res.data// 将数组中的图片链接遍历 依次下载for(let i=0;i<this.shopArr.length;i++){uni.downloadFile({url:this.shopArr[i],success: res => {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: res => {uni.hideLoading()if(i == this.shopArr.length-1){uni.hideLoading()uni.showToast({title:"图片保存成功"})this.shopArr = []}},fail: res => {if (res.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || res.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {uni.showModal({title: '提示',content: '需要您授权保存相册',showCancel: false,success: modalSuccess => {uni.openSetting({success: settingdata => {console.log('settingdata', settingdata);if (settingdata.authSetting['scope.writePhotosAlbum']) {uni.showModal({title: '提示',content: '获取权限成功,再次点击图片即可保存',showCancel: false});}else{uni.showModal({title: '提示',content: '获取权限失败，将无法保存到相册哦~',showCancel: false,})}},fail:failData=>{uni.showToast({title: '保存失败！',icon: 'none'});console.log("授权失败",failData)},});}});}}});},fail:res=>{console.log(res)}});}}})} else {uni.showModal({content: "您需要登录会员!",success: (res) => {if (res.confirm) {uni.navigateTo({url: '/pages/login/login?delta=1'})}}})}},作者：Reve2333
链接：https://juejin.cn/post/6844904122869612557
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

微信小程序实现一键保存多张图片相关推荐

STM32+ESP8266+MQTT微信小程序SoftAP一键配网接入腾讯物联网平台
STM32+ESP8266+MQTT微信小程序SoftAP一键配网接入腾讯物联网平台 Wi-Fi 配网,指由外部向 Wi-Fi 设备提供 SSID 和密码(PSW),让 Wi-Fi 设备可以连接指 ...
微信小程序之生成图片保存到相册
微信小程序之生成图片保存到相册需求概要电商项目中需要将自己小店的商品带上自己的小程序码生成海报,保存到本地,然后分享到万能的朋友圈,QQ空间,微博等等来广而告之- 如下图,三种海报格式轮播展示,左 ...
微信小程序下载网络图片保存到本地
微信小程序下载网络图片保存到本地问题背景前一篇文章介绍了,微信小程序网络请求数据并在页面列表显示(参考 https://blog.51cto.com/baorant24/6189453 ),本文将 ...
微信小程序实现一键查询全国快递物流地图轨迹
随着电子商务的快速发展,物流行业成为了一个关键的领域.对于用户来说,了解快递物流的实时状态和轨迹信息非常重要.本教程将介绍如何在微信小程序中实现一键查询全国快递物流地图轨迹的功能.通过这个功能,用户可 ...
上传声音微信小程序_微信小程序录音文件保存，播放
最近做微信小程序需要把录音文件保存起来然后在另一个地方再播放,录音用的是wx.startRecord接口返回的是录音文件的临时路径,开始以为是和选择图片保存图片没什么两样的操作,结果和后端同事一起折腾 ...
微信小程序之一键复制
微信小程序不支持页面复制功能,故要实现某些信息的复制,需要开发复制功能微信小程序中复制一般采用调用 wx.setClipboardData 接口实现功能如下: 1,.wxml里写一个复制按钮 & ...
微信小程序实现上传多张图片，删除图片
最近在做微信小程序,遇到上传多张图片到服务器,计算上传图片的张数,并且可以手动删除图片,下面是效果图效果图: 本来用的是小程序提供的 mp-uploader 上传图片的组件,无奈次组件删除效果不是我 ...
微信小程序 webview 截图保存相册
此种有缺陷,在手机上截图会有缺失,建议使用微信小程序canvas重画一份, 类似:https://blog.csdn.net/qq_17407437/article/details/104892831 ...
微信小程序手机号一键登录--获取用户手机号--微信小程序一键登录
前提:现在微信小程序登录我参考了几个大的公司的登录,基本分下面几种 1.微信用户一键登录,授权用户基本信息,不获取手机号 2.微信手机号一键登录,根据手机号去关联在其他平台数据,用手机号关联.然后再调 ...

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

微信小程序实现一键保存多张图片相关推荐

最新文章

热门文章