本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新的文字版本摘要。

此文为 「60 节实战课微信小程序开发视频教程」 的第 51 小节内容,如果需要查看视频版本的实战操作,请直接跳至文章的最后部分查看。

1.云开发图片空间简介

在之前的文章 微信小程序开发平台新功能「云开发」快速上手体验 中我们简要介绍了腾讯官方给所有的微信小程序开发提供的云开发的主要功能点,主要包含了下面几个大的功能。

目前提供三大基础能力支持:

云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

文件存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

对于一般的图片上传功能开发,我们一般需要实现如下几个技术点:

  1. 后台服务器的购买;
  2. API 域名的购买与配置;
  3. API 功能的开发;
  4. 图片空间的逻辑处理以及合理管理;
  5. 配置图片 CDN 加速图片加载效率。

而当我们使用腾讯提供的云开发功能时,只需要几行代码即可在微信小程序里实现完整的图片上传逻辑,非常地方便、高效。

2.图片上传的代码实现

使用腾讯云开发实现图片上传的主要业务逻辑如下:

  1. 通过 wx.chooseImage 方法让用户选择设备中的图片资源;
  2. 通过 wx.cloud.uploadFile 方法实现图片的上传,上传至腾讯提供的免费 5G 空间中;
  3. 通过 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 多名各行各业的软件开发人员,是供朋友们分享高质量资源、讨论软件开发问题解决方案、寻求孵化项目合作伙伴的干货社区。

任何技术都不是限制,我们最终目的是将技术转化成收入,实现财务自由。



社群中正在更新的原创视频教程 & 孵化项目进度

  1. 编程大世界:软件开发基础知识通解,带你进入软件开发的大世界;
  2. 80 节实战课精通 React Native 开发:我出版的书籍《React Native 精解与实战》配套视频教程;
  3. 微信小程序开发视频教程:最实战的小程序开发视频教程,重新规划课程内容增加至 60 小节;
  4. 50 个 Chrome Developer Tools 必备技巧:前端开发人员必备技能点;
  5. 我们的微信群中孵化出来的一个团队,在做一个服务于伦敦的小程序项目;
  6. 付费数据接口的无限制免费调用权限,已在微信群中分配了最高权限的 Key。

DevOpenClub Pro 社群指南

  1. 每日分享高质量的技术开发头条信息与资源;
  2. 遇到任何技术问题都可以进行快速提问、讨论交流;
  3. 永久获取每年原创的开发视频教程第一手资源更新;
  4. 获取其他高质量软件开发行业新闻、技术文章、教学视频分享;
  5. 群中认识更多的朋友以及分享合作开发项目的机会;
  6. 认识更多的行业朋友,或者交流自己的创业小项目;
  7. 交流与分享技术面试心得;
  8. 高质量、有价值的社区永远都不会是你所在的 QQ 群或微信群。

5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用的更多相关文章

  1. 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...

  2. 微信小程序图片上传和裁剪

    本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...

  3. 微信小程序---图片上传+服务端接受

    原文地址:http://blog.csdn.net/sk719887916/article/details/54312573 微信小程序,图片上传,应用地方-修改用户信息的头像. 详细代码: 小程序的 ...

  4. 微信小程序图片上传并展示

    1.首先编写微信小程序的页面和样式: index.js var total = []; Page({ data: { perImgSrc: [] }, onLoad: function (option ...

  5. 微信小程序图片上传java后台(前后端代码)

    小程序代码 upload:function(e){ var that = this; wx.showActionSheet({ itemList: ['从相册选择','拍照'], itemColor: ...

  6. 微信小程序图片上传放大预览删除代码

    效果: 一,下面是上传图片的效果 image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { v ...

  7. 微信小程序图片上传

    uploadImage : function (){ wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], / ...

  8. 17行代码解决微信小程序图片延迟加载

    js 页面 Page({ data: { realScrollTop: 0,//页面滚动距离 driveHeight //屏幕高度可初始化设置 }, scroll(e){ if(e.detail.sc ...

  9. (SSM框架)实现小程序图片上传(配小程序源码)

    阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序 ...

随机推荐

  1. Springboot 系列(一)Spring Boot 入门篇

    注意:本 Spring Boot 系列文章基于 Spring Boot 版本 v2.1.1.RELEASE 进行学习分析,版本不同可能会有细微差别. 前言 由于 J2EE 的开发变得笨重,繁多的配置, ...

  2. SpringCloud系列——Zuul 动态路由

    前言 Zuul 是在Spring Cloud Netflix平台上提供动态路由,监控,弹性,安全等边缘服务的框架,是Netflix基于jvm的路由器和服务器端负载均衡器,相当于是设备和 Netflix ...

  3. 多线程Thread,线程池ThreadPool

    首先我们先增加一个公用方法DoSomethingLong(string name),这个方法下面的举例中都有可能用到 #region Private Method /// <summary> ...

  4. MySQL 笔记整理(6) --全局锁和表锁:给表加个字段怎么有这么多阻碍

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> 6) --全局锁和表锁:给表加个字段怎么有这么多阻碍 数据库锁设计的初衷是处理并发问题.作为多用户共享的资源,当出现并发访问的时候, ...

  5. es简单打造站内搜索

    最近挺忙的,在外出差,又同时干两个项目.白天一个晚上一个,特别是白天做的项目,马上就要上线了,在客户这里 三天两头开会,问题很多真的很想好好静下来怼代码,半夜做梦都能fix bugs~ 和客户交流真的 ...

  6. 第六讲 smart qq C#开发总结

    smart qqC#开发总结: 整个开发下来其实一点都不是很难,从一开始二维码 获取到最终的收发消息,基本上都是模拟浏览器的操作.都是基于http通讯.一下就是 本次新手学习http协议的最关键的一个 ...

  7. Sqlite操作帮助类

      sqlite帮助类 using System; using System.Collections.Generic; using System.Linq; using System.Text; us ...

  8. (11)Microsoft office Word 2013版本操作入门_word中表格操作

    制作一个如下表格: 1. 插入一个4x4的表格或者手动绘制一个4x4表格. 1.1插入一个4x4表格或者绘制表格的按钮如下图所示 绘制表格,自己手动画比较复杂的表格 1.2对插入的表格:  点击表格的 ...

  9. 17 , CSS 区块、浮动、定位、溢出、滚动条

    1.CSS 中区块的使用 2.CSS 中浮动的使用 3.CSS 中定位的使用 4.CSS 中溢出的使用 5.CSS 中滚动条的使用 17.1 CSS 中区块的使用 属性名称 属性值 说明 width ...

  10. Android 的 so 文件加载机制

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 最近碰到一些 so 文件问题,顺便将相关知识点梳理一下. 提问 本文的结论是跟着 System.loadlibrary() 一层层源 ...