尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
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:上传中,})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-开发平台「云开发」图片上传功能实战此系列课程的完整更新大纲请参见[原创] 微信小程序开发视频教程
RELATED

相关推荐

【MATLAB】嵌入式ADC采样精度校准

【MATLAB】嵌入式ADC采样精度校准

【MATLAB】嵌入式ADC采样精度校准 摘要:ADC模数转换是嵌入式系统模拟量采集的核心环节,广泛应用于电压检测、传感采样、工业模拟信号监测等场景。嵌入式内置ADC普遍存在参考电压偏差、采样噪声、量化误差、温漂偏移、增益失准等问题,直接导致采样数据偏差大、稳定性差、精度…

📅 2026/9/23 9:22:12
虚幻引擎AI集成实战:从架构设计到性能优化的完整指南

虚幻引擎AI集成实战:从架构设计到性能优化的完整指南

1. 项目概述:为什么要在虚幻引擎里搞AI? 如果你是一个游戏开发者,最近打开虚幻引擎的官方文档或者社区论坛,会发现“AI”这个词的热度已经快赶上当年的“蓝图”了。这不仅仅是追赶潮流,而是整个游戏体验升级的必然路径…

📅 2026/9/23 9:22:32
AI知识库:让公司制度“活”起来,小白也能轻松查询并收藏!

AI知识库:让公司制度“活”起来,小白也能轻松查询并收藏!

本文介绍了企业如何利用AI知识库将内部制度、手册等资料转化为可检索、可授权、可引用的回答依据。通过资料治理、解析切分、建立索引、权限过滤、检索筛选和回答生成等步骤,AI知识库能够有效解决员工对公司制度版本、适用对象和权限的疑问。同时,本文还…

📅 2026/9/14 7:32:43
MORE NEWS

更多资讯

📰

Backtrack3软件下载避坑指南:5个致命报错与速查手册

Backtrack3软件下载避坑指南:5个致命报错与速查手册 面试被问回溯算法,你盯着 StackTrace 里的 RecursionError 或 Stack overflow…

📰

第二章 EXI协议原理与实现--8 cbexigen编解码库分析(8.1~8.2介绍+启动)TaoToken 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

单片机计算机毕设之基于 STM32 或 51 单片机的体征数据采集与手机 APP 监控系统设计 基于 STM32 或 51 单片机的多参数健康检测与阈值报警装置设计(024108)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于嵌入式单片机,Java、小程序技术领域和毕业项目实战 ✌️…

📰

ChatGPT Codex 试用心得:从 dotnet 项目 PR 到 TaoToken 配置的码农助手实测

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

微信小程序学生托管系统开发实践与优化

1. 项目背景与核心价值作为一名长期从事教育信息化系统开发的工程师,我观察到传统托管机构在学员管理、家校沟通、课程安排等方面普遍存在效率低下的问题。纸质登记易出错、家长无法实时了解孩子动态、教师排课耗时费力——这些痛点正是我们开发这套学生托管管理系统…

📰

3步搭建宠物医生博客系统,一文搞懂嵌入式与Web融合实战

3步搭建宠物医生博客系统,一文搞懂嵌入式与Web融合实战 官方文档动辄几百页,新手往往还没读完目录就放弃。对于刚接触嵌入式开发与Web前端结合的管理员来说,这种信息过载简直是噩梦。别慌,今天我们抛开那些晦涩的理论,用 一文搞懂…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬