5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新的文字版本摘要。
此文为 「60 节实战课微信小程序开发视频教程」 的第 51 小节内容,如果需要查看视频版本的实战操作,请直接跳至文章的最后部分查看。
1.云开发图片空间简介
在之前的文章 微信小程序开发平台新功能「云开发」快速上手体验 中我们简要介绍了腾讯官方给所有的微信小程序开发提供的云开发的主要功能点,主要包含了下面几个大的功能。
目前提供三大基础能力支持:
云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码
数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库
文件存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
对于一般的图片上传功能开发,我们一般需要实现如下几个技术点:
- 后台服务器的购买;
- API 域名的购买与配置;
- API 功能的开发;
- 图片空间的逻辑处理以及合理管理;
- 配置图片 CDN 加速图片加载效率。
而当我们使用腾讯提供的云开发功能时,只需要几行代码即可在微信小程序里实现完整的图片上传逻辑,非常地方便、高效。
2.图片上传的代码实现
使用腾讯云开发实现图片上传的主要业务逻辑如下:
- 通过
wx.chooseImage
方法让用户选择设备中的图片资源; - 通过
wx.cloud.uploadFile
方法实现图片的上传,上传至腾讯提供的免费 5G 空间中; - 通过
wx.cloud.uploadFile
的回调事件处理云端返回的图片资源 ID、链接等相关属性,进行后续地处理。
下面我们直接看这三个业务逻辑的代码部分。
/* 图片的选择与上传部分逻辑 */
// 上传图片
doUpload: function () {
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '上传中',
})
const filePath = res.tempFilePaths[0]
// 上传图片
// 这部分可以自行处理图片的命名方式,这里图片进行了固定命名为 my-image
const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
console.log('[上传文件] 成功:', res)
app.globalData.fileID = res.fileID
app.globalData.cloudPath = cloudPath
app.globalData.imagePath = filePath
// 上传成功后,页面进行跳转,在详情页加载图片显示等操作
wx.navigateTo({
url: '../storageConsole/storageConsole'
})
},
fail: e => {
console.error('[上传文件] 失败:', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
},
complete: () => {
wx.hideLoading()
}
})
},
fail: e => {
console.error(e)
}
})
},
/* 这部分比较简单,直接在页面读取加载到的图片链接即可 */
onLoad: function (options) {
const {
fileID,
cloudPath,
imagePath,
} = app.globalData
this.setData({
fileID,
cloudPath,
imagePath,
})
},
图片在云开发管理器中的管理与查看,可以看到图片已成功上传。
上传后跳转的页面展示。
3.视频版实战演示
如果你需要更加直观地查看此功能的视频教程,请跳转至此集的 B 站查看。
bilibili - 微信小程序开发视频教程 #051-开发平台「云开发」图片上传功能实战
此系列课程的完整更新大纲请参见:[原创] 微信小程序开发视频教程
加入社群,与 1000 多位朋友们共同成长
DevOpen.Club Pro 高质量软件开发分享讨论群,汇聚了近 1000 多名各行各业的软件开发人员,是供朋友们分享高质量资源、讨论软件开发问题解决方案、寻求孵化项目合作伙伴的干货社区。
任何技术都不是限制,我们最终目的是将技术转化成收入,实现财务自由。
社群中正在更新的原创视频教程 & 孵化项目进度
- 编程大世界:软件开发基础知识通解,带你进入软件开发的大世界;
- 80 节实战课精通 React Native 开发:我出版的书籍《React Native 精解与实战》配套视频教程;
- 微信小程序开发视频教程:最实战的小程序开发视频教程,重新规划课程内容增加至 60 小节;
- 50 个 Chrome Developer Tools 必备技巧:前端开发人员必备技能点;
- 我们的微信群中孵化出来的一个团队,在做一个服务于伦敦的小程序项目;
- 付费数据接口的无限制免费调用权限,已在微信群中分配了最高权限的 Key。
DevOpenClub Pro 社群指南
- 每日分享高质量的技术开发头条信息与资源;
- 遇到任何技术问题都可以进行快速提问、讨论交流;
- 永久获取每年原创的开发视频教程第一手资源更新;
- 获取其他高质量软件开发行业新闻、技术文章、教学视频分享;
- 群中认识更多的朋友以及分享合作开发项目的机会;
- 认识更多的行业朋友,或者交流自己的创业小项目;
- 交流与分享技术面试心得;
- 高质量、有价值的社区永远都不会是你所在的 QQ 群或微信群。
5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用的更多相关文章
- 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用
本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...
- 微信小程序图片上传和裁剪
本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...
- 微信小程序---图片上传+服务端接受
原文地址:http://blog.csdn.net/sk719887916/article/details/54312573 微信小程序,图片上传,应用地方-修改用户信息的头像. 详细代码: 小程序的 ...
- 微信小程序图片上传并展示
1.首先编写微信小程序的页面和样式: index.js var total = []; Page({ data: { perImgSrc: [] }, onLoad: function (option ...
- 微信小程序图片上传java后台(前后端代码)
小程序代码 upload:function(e){ var that = this; wx.showActionSheet({ itemList: ['从相册选择','拍照'], itemColor: ...
- 微信小程序图片上传放大预览删除代码
效果: 一,下面是上传图片的效果 image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { v ...
- 微信小程序图片上传
uploadImage : function (){ wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], / ...
- 17行代码解决微信小程序图片延迟加载
js 页面 Page({ data: { realScrollTop: 0,//页面滚动距离 driveHeight //屏幕高度可初始化设置 }, scroll(e){ if(e.detail.sc ...
- (SSM框架)实现小程序图片上传(配小程序源码)
阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序 ...
随机推荐
- [十三]基础数据类型之AbstractStringBuilder
String内部是一个private final char value[]; 也就意味着每次调用的各种处理方法,返回的字符串都是一个新的,性能上,显然.... 所以,对于可变字符序列的需求是很明确 ...
- 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU特性介绍(3)- 命名规则
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的命名规则. 打开任何一款i.MX RT系列芯片的Data Sheet均可找到如下命名规则表,以i.MX ...
- 第11章 使用OpenID Connect添加用户身份验证 - Identity Server 4 中文文档(v1.0.0)
在本快速入门中,我们希望通过OpenID Connect协议向我们的IdentityServer添加对交互式用户身份验证的支持. 一旦到位,我们将创建一个将使用IdentityServer进行身份验证 ...
- (摘)Entity Framework Core 2.1带来更好的SQL语句生成方案
微软发布了Entity Framework Core2.1,为EF开发者带来了很多期待已久的特性.EF Core 2.1增加了对SQL GROUP BY的支持,支持延迟加载和数据种子等. EF Cor ...
- 【Java千问】你了解代理模式吗?
代理模式详解 1 什么是代理模式? 一句话描述:代理模式是一种使用代理对象来执行目标对象的方法并在代理对象中增强目标对象方法的一种设计模式. 详细描述: 1.理论基础-代理模式是设计原则中的“开闭原则 ...
- Web前端 页面功能——点击按钮返回顶部的实现方法
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- 移动端web自适应适配布局解决方案
100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...
- Linux 监控CPU、内存、IO
安装说明 # tar zxvf sysstat-11.5.6.tar.gz# cd sysstat-11.5.6# ./configure# make# make install 备注:若在linux ...
- dns server 域名解析总结
1.客户有两种使用公网域名解析的方法,一种是,直接配置A记录,将域名直接解析到ip地址.第二种是,配置NS记录,将对这个域名的解析分配给另外一个域名服务器,这个域名服务器就是客户自己搭建的内部域名服务 ...
- 通过fromdata实现上传文件
其实呢,文件上传的插件很多,可是现在做的东西要求尽量少用插件,所以就自己写了一下. 之前也用node写过对文件处理方面的东西,这次用php写着试一下. a.html文件 <!DOCTYPE ht ...