【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片
大家好,我叫小秃僧
@ toc
1、 实现效果
废话少说,先看效果为敬:
说明:
2、JavaScript代码
首先,我们要在页面的data对象里面定义fileList、linshi两个数组
/** * 页面的初始数据 */ data: { fileList:[], //存放有图片地址的图片数组 linshi:[], //存放选择的图片的临时数组 },
有很详细的代码注释,很好理解,非常简单。这是上传图片函数的代码
// 上传图片 uploadToCloud() { let that = this; wx.chooseImage({ count: 9, //count属性确定最多可以上传9张,下方属性可以看看官方的说明,就不一一说明 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success (res) { wx.showLoading({ title: '正在上传', }) console.log(res) //赋值给linshi临时数组暂时存储起来 that.setData({ linshi:that.data.linshi.concat(res.tempFilePaths) }) console.log(that.data.linshi) //设置图片存储到云存储的位置和图片名称 let lujin = "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000); //这里调用了图片上传函数wx.cloud.uploadFile() //传给wx.cloud.uploadFile的cloudPath属性的值不能重复!!!巨坑,加个index就可以避免重复了 const uploadTasks = that.data.linshi.map((item, index) => that.uploadFilePromise(index+lujin, item)); //promise.all方法会等待map方法都执行完全后再继续执行then方法里面的代码 Promise.all(uploadTasks) .then(data => { console.log(data) wx.hideLoading() wx.showToast({ title: '上传成功', icon: 'none' }); const newFileList = data.map(item => ({ url: item.fileID,isImage: true,})); console.log(newFileList) //每次上传成功后,都要清空一次临时数组,避免第二次重复上传,浪费存储资源, that.setData({ fileList: that.data.fileList.concat(newFileList), linshi:[], }); }) .catch(e => { wx.showToast({ title: '上传失败', icon: 'none' }); console.log(e); }); } }) }, //上传到云存储,并且获得图片地址 uploadFilePromise(fileName, chooseResult) { return wx.cloud.uploadFile({ cloudPath: fileName, filePath: chooseResult }); },
下方是删除函数:
//删除图片 delete:function(event){ let that = this; console.log(event) let inde = event.currentTarget.dataset.id //删除数组里面的值 that.data.fileList.splice(inde,1) that.setData({ fileList:that.data.fileList, }) },
下方是预览函数:
//预览图片 previewImage:function(event){ console.log(event) wx.previewImage({ urls: [event.currentTarget.dataset.url] // 需要预览的图片http链接列表 }) },
你会发现delete函数和previewImage函数都有个接收参数event,delete函数的event是用来接收我们在wxml绑定的id,而id的值就等于图片数组下标index,用于区别删除哪一张图片
预览也是同样的逻辑。previewImage函数的event是用来接收我们在wxml绑定的url,而url的值就等于图片地址url,用于区别预览哪一张图片,并传值给wx.previewImage()方法进行预览即可
点击会触发对应的函数,我们绑定的数据就会传给对应函数的event参数接收。非常简单!
我们在wxml是这样子绑定数据的,如下图:
id和url可以自定义哈,绑定数据的固定格式是data-xxx
下方是下载函数:
//下载图片 download:function(){ let url = this.data.fileList[0].url; //下载文件 wx.cloud.downloadFile({ fileID: url, success: res => { console.log("文件下载成功",res); //打开文件 const filePath = res.tempFilePath wx.showModal({ title: '提示', content: '下载成功,请打开另存', showCancel:false, confirmText:'前往另存', success (res) { if (res.confirm) { console.log('用户点击确定') wx.openDocument({ filePath: filePath, success: function (re) { console.log('文件打开成功',re) } }) } else if (res.cancel) { console.log('用户点击取消') } } }) } }) },
使用官方给的wx.cloud.downloadFile方法进行下载,因为这个示例我下载的是图片的第一张,所以fileID我们传入的是图片数组的第一张图片的地址。
下载成功后,我们可以使用官方的wx.openDocument方法去打开刚刚下载的图片。
非常简单易懂滴!
3、wxml代码
<view class="des">温馨提示:点击加号图片可以上传图片哦</view> <view class="img"> <block wx:for="{{ fileList }}" wx:key="index"> <view class="img2"> <view bindtap="delete" data-id="{{index}}">x</view> <image bindtap="previewImage" data-url="{{item.url}}" src="{{item.url}}"></image> </view> </block> <image wx:if="{{fileList.length<9}}" bindtap="uploadToCloud" style="width: 200rpx;height: 200rpx;" src="/images/jiahao.png"></image> </view> <button style="margin: 30rpx 0" type="primary" catchtap="download">下载第一张图片</button>
在wxml里分别绑定了delete()删除函数、previewImage()预览函数、uploadToCloud()上传函数、download()下载函数。点击会分别触发不同的函数,实现对应的功能
4、wxss代码
这个wxss是规定wxml的内容是怎么显示,就是写一些样式,比如图片的宽高要多大等等
.img{ margin-left: 5%; width: 90%; display: flex; flex-direction: row; flex-wrap: wrap; } .img2{ width: 210rpx; height: 210rpx; } .img2 view{ color: red; z-index: 5; position: relative; width: 20rpx; height: 20rpx; margin-top:0rpx; margin-left: 90%; } .img2 image{ width: 190rpx; height: 190rpx; position: relative; z-index: 5; } .des { padding-left: 40rpx; padding-top: 20rpx; font-size: 26rpx; color: #acacac; letter-spacing: 2rpx; line-height: 42rpx; }
到这里就完成了,有详细的代码注释,是不是非常简单
需要源码可以点击这里
学到的童鞋,一键三连为敬!感激不尽....哈哈哈,欢迎关注小秃僧!
end
欢迎关注微信公众号:小秃僧
- 天才制造者:独行侠、科技巨头和AI|深度学习崛起十年
- Go内存管理一文足矣
- React如何原生实现防抖?
- 分布式日志存储架构设计方案
- Chrome插件:云音乐听歌识曲
- 全场景AI推理引擎MindSpore Lite, 助力HMS Core视频编辑服务打造更智能的剪辑体验
- 页面搭建系统的那些事儿
- 张文骁:游戏开发的“零件人”梦碎之后|OneFlow U
- App 出海 —— Google 结算系统面面观
- Curve 基于 Raft 的写时延优化
- Pandas 中最常用的 7 个时间戳处理函数
- 实现Nest中参数的联合类型校验
- JDK内置锁深入探究
- Docker 实战教程之从入门到提高 (八)
- 腾讯三面:Cookie的SameSite了解吧,那SameParty呢?
- 实录 | MegEngine 大 Kernel 卷积工程优化实践
- 虚幻引擎 5 来了!不止 Lumen、Nanite 新技术,性能及 UI 均迎来大升级
- 前端新手快速上手APICloud App开发
- 高效使用Java构建工具|Maven篇|云效工程师指北
- 云音乐隐性关系链的探索与实践