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

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

  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: ,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) { wx.showLoading({
title: '上传中',
}) const filePath = res.tempFilePaths[] // 上传图片
// 这部分可以自行处理图片的命名方式,这里图片进行了固定命名为 my-image
const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[]
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,
})
},

后记:图片在云开发管理器中的管理与查看,可以看到图片已成功上传。

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

  1. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

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

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

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

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

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

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

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

  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. (SSM框架)实现小程序图片上传(配小程序源码)

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

  9. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

随机推荐

  1. spring声明式事务管理方式( 基于tx和aop名字空间的xml配置+@Transactional注解)

    1. 声明式事务管理分类 声明式事务管理也有两种常用的方式, 一种是基于tx和aop名字空间的xml配置文件,另一种就是基于@Transactional注解. 显然基于注解的方式更简单易用,更清爽. ...

  2. linux 防火墙 iptables 目录

    linux iptables 防火墙简介 Linux 防火墙:Netfilter iptables 自动化部署iptables防火墙脚本

  3. Ubuntu虚拟机识别不了SD卡的解决办法

    前提,你的虚拟机已经安装了VMware Tools. Step 1: 出现这种情况先查看计算机中的虚拟机的VMware USB Arbitration Service是否启用(注意是VMware US ...

  4. Windows平台ping测试局域网所有在用IP

    由于工作需要,我在家里搭建了很多VM,同时智能家居设备也占用了很多IP.平日偶尔会有确认局域网内哪些IP目前在用的需求. 这个需求很简单,直接从网上也可以搜索到很多答案,最终找到一个经实际测试可用的方 ...

  5. ACFS-9459: ADVM/ACFS is not supported on this OS version

    环境:RHEL 7.3 + Oracle 12.2.0.1 RAC 现象:acfs资源状态不正常,asmca图形也没有acfs相关内容,无法使用acfs. 1.具体现象 2.定位bug 3.解决问题 ...

  6. 如何通过代码审计挖掘REDos漏洞

    写这篇文章的目的一是由于目前网上关于java代码审计的资料实在是太少了,本人作为一个java代码审计的新手,深知学习java代码审计的难受之处,所以将自己学习过程中挖掘的一些漏洞写成博客发出来希望可以 ...

  7. Kubernetes 网络改进的三项实践分享

    自研CNI IPAM插件 解决K8s功能问题 首先,在功能方面,Kubernetes 网络模型由于IP不固定,无法对IP资源进行精细管控,无法使用基于IP的监控和基于IP的安全策略,此外,一些IP发现 ...

  8. shell bash-shell

    bash shell中的命令替换,`cmd`或者$(cmd). bash shell中的变量赋值,直接name = var:  (bash中的变量赋值不能中间有空格) 变量引用时,$name,如果na ...

  9. 第三方jar上传至公司maven仓库(私库)解决办法

    在实际开发过程中,我们经常会遇到需要引用的jar依赖,在我们公司的maven仓库不存在,这个时候我们就需要把jar上传上去,在项目中添加对应依赖就OK了. 步骤1:下载jar 在http://mvnr ...

  10. chm开源文档制作

    作为开发人员,API文档是非常关键的^_^,但是很多时候官方提供的文档是html的docs,不方便于携带查询,本章主要介绍chm文档的制作方法. 使用jd2chm制作chm文档 安装之前必须先安装 h ...