微信小程序从云存储中读取图片

在微信小程序中，图片存储在云端或OSS等对象存储中，获取图片的示例代码如下：

1、从云存储中读取图片：

  get_image(e){ var that = thisconsole.log(e)wx.showLoading({icon: 'loading',title: '加载中，请稍后',})wx.cloud.getTempFileURL({fileList: [{fileID: 'cloud://***-1gwjhztm2ea30ea3.7368-***-1gwjhztm2ea30ea3-1309829868/seat_display.jpg'// maxAge: 60 * 60, // one hour}]}).then(res => {// get temp file URLconsole.log(res.fileList)that.setData({imgData: res.fileList[0].tempFileURL}) }).catch(error => {// handle error})}

2、点击预览图片，放大缩小

该方法获取图片有一定缓存时间，在云存储中更新了图片，不能实时显示出来。

  clickImg: function(e){wx.hideLoading({})var imgUrl = this.data.imgUrlvar imgUrl = this.data.imgDatavar urls = []urls.push(imgUrl)wx.previewImage({urls: urls, //需要预览的图片http链接列表，注意是数组success: function (res) { },fail: function (res) { },complete: function (res) { },showmenu: false})},

3、每次获取最新图片，在云存储中更新了图片，能实时显示出来。

  clickImg: function(e){wx.hideLoading({})// var imgUrl = this.data.imgUrl var imgUrl = this.data.imgData + "?time=" + Date.now()// var imgUrl = this.data.imgData var urls = []urls.push(imgUrl)wx.previewImage({// let new_url = res.fileList[0].tempFileURL + "?time=" + Date.now()  urls: urls   , //需要预览的图片http链接列表，注意是数组success: function (res) { },fail: function (res) { },complete: function (res) { },showmenu: false})},

4、运行效果如下：

微信小程序从云存储中读取图片相关推荐

微信小程序拍照/从相册中选择图片
微信小程序提供的众多API中,wx.chooseImage函数就是用来访问手机相册或摄像头的.调用该函数后,界面下方会呼出一个菜单,可以分别选择进入相册挑选已有照片或是打开摄像头进行拍照: 我们往WX ...
微信小程序文件云存储-上传下载删除功能
文件云存储云存储提供高可用.高稳定.强安全的云端存储服务,支持任意数量和形式的非结构化数据存储,如视频和图片,并在控制台进行可视化管理.云存储包含以下功能: 存储管理:支持文件夹,方便文件归类.支持 ...
小程序页面如何直接调用云存储中的图片
小程序页面有swiper轮播图展示,由于图片直接放在本地,内存过大,所以使用小程序云开发的云存储存放图片,让小程序轮播图图片直接从云存储中进行获取 (1)在小程序云开发控制台,点击存储,新建一个swi ...
微信小程序基于云数据库简单实现帖子点赞功能。
思路: 1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid.获取帖子云数据存放到suju:[]里. 2·点击点赞按钮图标变换 ...
微信小程序之云开发
一.概念 1. 传统开发模式 2. 新开发模式 ( 云开发模式 ) 3. 传统.云开发的模式对比 4. 传统.云开发的项目流程对比 5. 云开发的定位 1. 个人的项目或者想法,不想开发服务器,直接使 ...
微信小程序的云开发以及与传统开发的比较
一.微信小程序的云开发概念云开发就是一套解决小程序前后端开发的一种云端能力它提供了一整套云服务及简单.易用的 API 和管理界面,以尽可能降低后端开发成本,让开发者能够专注于核心业务逻辑的开发.尽 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
微信小程序使用云函数进行mysql操作
微信小程序使用云函数进行mysql操作其他操纵数据库方式的一些问题准备工作云函数代码调用云函数时候的代码最后还需要注意的一些小事情: 其他操纵数据库方式的一些问题现在使用小程序,对数据库的 ...
微信小程序运用云函数调用新闻类API
微信小程序运用云函数调用新闻类API 微信小程序运用云函数调用新闻类API 新闻列表的编写云函数的编写 JS方法 wxml页面编写 wxss样式最终效果截图微信小程序运用云函数调用新闻类API ...
HaaS EDU物联网项目实战：微信小程序实现云养花
HaaS EDU K1是一款高颜值.高性能.高集成度的物联网开发板,板载功能强大的4核(双核300Mhz M33+双核1GHz A7)主芯片,2.4G/5G双频Wi-Fi,双模蓝牙(经典蓝牙/BLE) ...

微信小程序从云存储中读取图片

微信小程序从云存储中读取图片相关推荐

最新文章

热门文章