上传图片

首先，我去查看上传图片的API。

上传图片的官方文档

wx.chooseImage(Object object):从本地相册选择图片或使用相机拍照。

下面我在index.wxml中给定，上传图片的按钮

<button bindtap="onloadimage">上传图片</button>

然后在index.js中的实现onloadimage的方法，下图是官方的示例。

在小程序中的云开发上传图片的API接口，官方文档如下；https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html

展示图片

在这里定义了一个image的空列表，当点击按钮时，通过调用云函数中的login，然后将返回的data保存到云数据库中。

下载图片

对于下载图片，通过定义data-fileid绑定fileID，然后通过fileID: event.target.dataset.fileid拿到fileID，下面就是一个wx.cloud.downloadFile云函数下载图片的方法，具体查看官方文档

下面是全部代码

index.wxml代码

<button bindtap="onloadimage">上传图片</button>
<button bindtap="getimage">展示图片</button>
<block wx:for="{{image}}"><image src="{{item.fileID}}"></image><button size="mini" data-fileid="{{item.fileID}}"  bindtap="downloadimage">下载图片</button>
</block>

index.js代码

//index.js
const app = getApp()
const db = wx.cloud.database()Page({data: {image: []},onloadimage:function(){wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success (res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePaths;console.log(tempFilePaths[0]);wx.cloud.uploadFile({cloudPath: new Date().getTime() + ".png",filePath: tempFilePaths[0], // 文件路径success: res => {// get resource IDconsole.log(res.fileID)db.collection("image").add({data:{fileID:res.fileID,}}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})},fail: err => {// handle error}})},})},// 展示图片getimage:function(){wx.cloud.callFunction({name:"login",}).then(res=>{db.collection("image").where({_openid:res.result.openid}).get().then(res2=>{console.log(res2)this.setData({image: res2.data})})})},// 下载图片downloadimage:function(event){wx.cloud.downloadFile({fileID: event.target.dataset.fileid, // 文件 IDsuccess: res => {// 返回临时文件路径console.log(res.tempFilePath)// 保存图片到手机相册wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res){wx.showToast({title: '保存成功',})}})},fail: console.error})}
})

上传图片

下载图片

五十二、微信小程序云开发中的云存储相关推荐

微信小程序在开发中遇到的问题与解决方法
微信小程序在开发中遇到的问题与解决方法参考文章: (1)微信小程序在开发中遇到的问题与解决方法 (2)https://www.cnblogs.com/zjjDaily/p/8032142.html ...
微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...
五十、微信小程序云开发中的云数据库
@Author:Runsen 今天是2020年7月24日.不学习,不复习,那根一条咸鱼差不多. 今天继续学习复习微信小程序中的云开发. 文章目录云开发云数据库云开发开发者可以使用云开发开发微信 ...
access突然需要登录_早知道早好，微信小程序登录开发需要注意的事项
最近公司要做一个企业微信的小程序,方便企业内的成员来登录,以便一些公司内的业务,只限于公司内的成员来操作,因为有微信小程序的开发经验,所以先当作微信小程序来开发了! 首先来讲一下这个企业微信小程序与微 ...
微信小程序商城开发-商品详情页跳转购物车
项目场景: 微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转) 问题描述点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错原因分析: 微 ...
五十一、微信小程序云开发中的云函数
@Author:Runsen 暑假很长,明年就是找工作的时候了.这个时候必须比之前还要拼命. 百无聊赖,看过文档才发现,微信小程序已将云函数,对象存储和云数据库这些都搬了进来,由于前几天刚刚看过这些方 ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
微信小程序从零开始开发步骤（二）创建小程序页面
上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录选中page,右击鼠标,从硬盘打 ...
【微信小程序】开发入门篇（二）
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...

五十二、微信小程序云开发中的云存储

文章目录

上传图片

展示图片

下载图片

五十二、微信小程序云开发中的云存储相关推荐

最新文章

热门文章