本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储以及介绍云开发的 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:上传中,})constfilePathres.tempFilePaths[0]// 上传图片// 这部分可以自行处理图片的命名方式这里图片进行了固定命名为 my-imageconstcloudPathmy-imagefilePath.match(/\.[^.]?$/)[0]wx.cloud.uploadFile({cloudPath,filePath,success:res{console.log([上传文件] 成功,res)app.globalData.fileIDres.fileID app.globalData.cloudPathcloudPath app.globalData.imagePathfilePath// 上传成功后页面进行跳转在详情页加载图片显示等操作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.globalDatathis.setData({fileID,cloudPath,imagePath,})},图片在云开发管理器中的管理与查看可以看到图片已成功上传。上传后跳转的页面展示。3.视频版实战演示如果你需要更加直观地查看此功能的视频教程请跳转至此集的 B 站查看。bilibili - 微信小程序开发视频教程 #051-开发平台「云开发」图片上传功能实战此系列课程的完整更新大纲请参见[原创] 微信小程序开发视频教程