【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片
大家好,我叫小秃僧
这篇文章是讲解云开发如何上传、下载、预览、删除图片,并且以九宫格展示图片的功能
@
1、 实现效果
废话少说,先看效果为敬:
说明:
中间停顿一下是我在选择照片上传。点击右上角的“x”可以删除图片,点击“下载第一张图片”按钮可以下载并打开第一张图片,因为下载download()函数我传入的是第一张图片的云存储的图片地址。
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
专注前端开发,擅长微信小程序开发。欢迎关注微信公众号:小秃僧
【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片的更多相关文章
- 技本功丨收藏!斜杠青年与你共探微信小程序云开发(下篇)
2019年2月26日,人们为了一个杯子疯了一天. 星巴克猫爪杯,一场已经与猫无关了的“圣杯战争“.网上的倒卖价格,已炒至近千元! 求而不得,舍而不能,得而不惜.这是人最大的悲哀... 所以,请珍惜以下 ...
- 微信小程序-云开发(手记)
微信小程序-云开发(手记) 1.创建data.json文件 注意以下几点要求: 入门示例: init方法的env:默认环境配置,传入字符串形式的环境 ID(理解为数据库)可以指定所有服务的默认环境(意 ...
- 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作
爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...
- 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现
第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...
- “我要点爆”微信小程序云开发实例
使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...
- 微信小程序云开发-从0打造云音乐全栈小程序
第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...
- 微信小程序云开发不完全指北
微信小程序云开发不完全指北 首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
- 微信小程序云开发如何上手
简要介绍 微信小程序云开发,是基于 Serverless 的一站式后端云服务,涵盖函数.数据库.存储.CDN等服务,免后端运维.基于云开发可以免鉴权调用微信所有开放能力. 前提准备 微信开发者工具 创 ...
- 微信小程序-云开发实战教程
微信小程序-云开发实战教程 云函数,云存储,云数据库,云调用 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/gettin ...
- 微信小程序-云开发-实战项目
微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...
随机推荐
- Docker学习(三)——Docker镜像使用
Docker镜像使用 当运行容器时,使用的镜像如果在本地中不存在,docker就会自动从docker镜像仓库中下载,默认是从Docker Hub公共镜像源下载. 1.镜像使用 (1)列 ...
- Shell脚本字符串截取方法总结
Shell脚本8种字符串截取方法总结转自:https://www.cnblogs.com/ralphdc/p/8032335.html Linux 的字符串截取很有用.有八种方法.假设有变量 var= ...
- mybatis-plus条件构造用is开头的Boolean类型字段时遇到的问题
is打头的Boolean字段导致的代码生成器与lambda构造器的冲突 https://gitee.com/baomidou/mybatis-plus/issues/I171DD?_from=gite ...
- Android Https相关完全解析
转载: 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/48129405: 本文出自:[张鸿洋的博客] 一.概述 其实这篇文章理论 ...
- Java——数组的定义与使用
数组的定义与使用 1.数组的基本概念 (1)数组的动态初始化: 数组首先先开辟内存空间,而后再使用索引进行内容的设置,这种定义数组的方式称为动态初始化 数组是引用数据类型,存在有内存分配问题.在使用前 ...
- Android Bitmap 全面解析(二)加载多张图片的缓存处理
一般少量图片是很少出现OOM异常的,除非单张图片过~大~ 那么就可以用教程一里面的方法了通常应用场景是listview列表加载多张图片,为了提高效率一般要缓存一部分图片,这样方便再次查看时能快速显示~ ...
- vue SCSS
C:\eclipse\wks\vue\esql-ui>node -v v12.18.1 C:\eclipse\wks\vue\esql-ui>npm -v 6.14.5 直接修改p ...
- mybatis-扩展
分页插件 使用pageHelper参考官方https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse. ...
- navicat突然连接不上远程linux服务器上的mysql
我linux服务器上的mysql是docker安装的,突然有一天我的navicat连接不上服务器上的mysql,于是开始了下面一系列的修复 1.首先登录服务器上mysql,看是否能正常登录,我发现不能 ...
- 【Linux】【Services】【DNS】使用Bind搭建DNS服务
1. 简介 1.1. 实现的功能:DNS解析以及智能转发 1.2. 官方文档: 1.3. 基础概念:http://www.cnblogs.com/demonzk/p/6494968.html 2. 环 ...