微信小程序实现多图片下载

1.实现效果

2.实现思路

wx.getSetting:获取用户授权。
wx.downloadFile：下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。
wx.saveImageToPhotosAlbum：保存文件到本地。

3.实现步骤

1.设置一个can_click参数，防止重复点击。
2.对图片数组进行处理，当选中图片之后，设置改项为选中状态，显示选中状态（蒙层+选中），并将选中项push进一个新数组。
3.点击保存，判断新数组长度，小于0 ，大于9提示，否则进行图片保存。
4.保存完毕（或保存出错），清空数组并清除选中状态。

4.实现代码

<view class="img_box"><block wx:for="{{img_list}}" wx:key="index"><view class="img_item" catchtap="choseOne" data-index="{{index}}"><image src="{{item.icon}}" class="img_img" /><view class="item_check {{item.checked && 'checked'}}"></view><!-- 蒙层 --><view class=" {{item.checked && 'item_mask'}}"></view></view></block>
</view>
<view class="btn" catchtap="saveTo">保存到相册</view>

/* pages/wxCase/downFile/index.wxss */
page {background-color: #fff;
}.img_box {padding: 0 20rpx;box-sizing: border-box;display: grid;width: 100%;/* 相当于 1fr 1fr 1fr */grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);grid-auto-flow: row;/* grid-column-gap 和 grid-row-gap的简写 */grid-column-gap: 26rpx;grid-row-gap: 23rpx;
}.img_item {width: 220rpx;height: 220rpx;position: relative;
}.img_img {width: 100%;height: 100%;
}.item_check {position: absolute;width: 35rpx;height: 35rpx;border-radius: 50%;border: 3rpx solid #f5ecec;right: 10rpx;top: 10rpx;z-index: 11;
}.checked {background: #acd0e0;border: none;position: absolute;
}.checked::after {position: absolute;width: 4px;height: 8px;border-width: 0 2px 2px 0;border-color: #fff;border-style: solid;-webkit-transform: rotate(45deg);transform: rotate(45deg);content: '';left: 31%;top: 10%;
}.item_mask {position: absolute;z-index: 9;width: 100%;height: 100%;left: 0;top: 0;background-color: rgb(0, 0, 0, 0.4);
}.btn {margin: 140rpx auto;width: 625rpx;height: 80rpx;background: linear-gradient(90deg, #dd8449 0%, #e28e74 52%, #dbb290 100%);border-radius: 6rpx;font-size: 30rpx;color: #fff;line-height: 80rpx;text-align: center;position: relative;overflow: hidden;
}.btn:after {content: "";background: #999;position: absolute;width: 750rpx;height: 750rpx;left: calc(50% - 375rpx);top: calc(50% - 375rpx);opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);transition: all 0.4s ease-in-out;
}.btn:active:after {transform: scale(0);opacity: 1;transition: 0s;
}

// pages/wxCase/downFile/index.js
import {writePhotosAlbum
} from '../../../utils/util'
Page({data: {img_list: [{icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg'},{icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg'},{icon: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg'},{icon: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg'},{icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg'},{icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg'},{icon: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg'},{icon: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg'},{icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg'},{icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg'},],checkd_list: [],},can_click:true,choseOne(e) {let {index} = e.currentTarget.dataset, {img_list,} = this.data;img_list[index].checked = !img_list[index].checked;let checkd_list = img_list.filter((item) => {return item.checked && item})this.setData({img_list,checkd_list})},saveTo() {if (this.data.checkd_list.length === 0) {return wx.showToast({title: '请选择需要保存的图片',icon: 'none'})}if (this.data.checkd_list.length > 9) {return wx.showToast({title: '同时最多只能保存9张图片',icon: 'none'})}if (this.can_click) {console.log(1111)this.can_click=false;var that = this;writePhotosAlbum(function success() {that.downForque(that.data.checkd_list).then(res => {wx.hideLoading()wx.showToast({title: '下载完成',icon: 'none'})that.data.img_list.forEach(item => {item.checked = false;})that.setData({img_list: that.data.img_list})that.data.checkd_list = [];that.can_click=true;}).catch(err => {that.data.img_list.forEach(item => {item.checked = false;})that.setData({img_list: that.data.img_list})that.data.checkd_list = []wx.hideLoading();that.can_click=true;})},function fail() {wx.showToast({title: '您拒绝了保存到相册',icon: 'none'})})}},// 队列downForque(urls) {let promise = Promise.resolve()urls.forEach((url, index) => {promise = promise.then(() => {return this.download(url.icon, index)})})return promise;},download(url, index) {let length = this.data.checkd_list.lengthreturn new Promise((resolve, reject) => {wx.downloadFile({url: url,success: function (res) {var temp = res.tempFilePathwx.saveImageToPhotosAlbum({filePath: temp,success: function (res) {wx.showLoading({title: '下载中(' + (index + 1) + '/' + length + ')'})resolve(res)},fail: function (err) {reject(res)}})},fail: function (err) {reject(err)}})})},
})

4.更多代码，关注苏苏的码云。

微信小程序实现多图片下载相关推荐

微信小程序：修复图片音频全新升级带特效喝酒神器源码
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
微信小程序中高清图片替换加载策略
微信小程序中高清图片替换加载策略前言一.基本思想二.具体步骤 1.图片大小对比 2.代码流程总结前言随着微信的不断发展,微信小程序凭借着它用户基数大,无下载安装等优点开始逐渐替代传统app ...
微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动.放大.旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册. 我的具体实现思路是这样的:(文章底部留有 ...
小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
微信小程序怎么实现图片按住一角缩放、旋转、拖拽
微信小程序怎么实现图片按住一角缩放.旋转.拖拽图片一角可以加个小图片,按住来操作利用movable-view.movable-area 可以实现拖拽缩放.不好旋转是不是可以利用canvas绘图 ...
为什么微信小程序里的图片在电脑上显示在手机上不显示？
<image class='carousel' src="/images/图片301@2x.png"></image> 电脑上显示图片,但手机上是空白的 & ...
关于微信小程序不能显示图片
本人场景:wxml <image> 标签设置 src="../../images/中文名.png" 时出现 IOS 端显示没问题,而安卓端不显示图片的问题. 上网一查才 ...
跳一跳改分java源码_解密微信小程序漏洞：可下载任意小游戏源代码，“跳一跳”可改分...
原标题:解密微信小程序漏洞:可下载任意小游戏源代码,"跳一跳"可改分雷锋网消息,据 IT 之家 1 月 2 日消息称,"跳一跳"居然可以利用漏洞自己改分数,甚 ...
微信图片自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下.-wxml 发布项目 /**选择图片 */ choose: functio ...
android可拖拽九宫格,微信小程序实现九宫格图片拖拽
(在真机上的效果就不演示了,是差不多的) 实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签. moveable-area是可拖拽的区域,需要设置 ...