开发 | 手把手,教你为小程序添加「上传图片」功能

作者:goodspeed

知晓程序注:

很多小程序都为用户提供图片上传功能。这时候,使用一些「对象存储」云服务,也许是最快、最经济的选择。

那么,小程序该如何使用这类服务呢?使用的时候,又应该注意哪些问题呢?

知晓程序(微信号 zxcx0101)今天分享的这篇文章,会以腾讯云的对象存储服务为例,教大家将小程序接入对象存储服务。

关注「知晓程序」微信公众号,回复「开发」,获取小程序开发全套经验。

准备工作

上传图片,主要是将图片上传到腾讯云对象存储(COS)。

要使用对象存储 API,需要先执行以下步骤:

  • 购买腾讯云对象存储(COS)服务。
  • 在腾讯云 对象存储控制台 里创建一个 Bucket。
  • 在控制台「个人 API 密钥」页面里,获取 AppID、SecretID、SecretKey 等内容。
  • 编写一个请求签名算法程序(或使用任何一种服务端 SDK)
  • 计算签名,调用 API 执行操作。

所以,我们要做的准备工作有:

  • 进入腾讯云官网(www.qcloud.com),注册帐号。
  • 登录云对象存储服务(COS)控制台,开通 COS 服务,创建资源需要上传的 Bucket。
  • 在公众平台小程序后台中,配置相关域名信息(否则无法在小程序中发起对该域名的请求)。

这些配置过程这里就不做说明了,接下来主要介绍步骤 4 和 5。

小程序上传图片到 COS 的流程图,如下:

在这个过程中我们需要实现的是,鉴权服务器返回签名的步骤,以及小程序处理图片的相关步骤。

COS 鉴权服务

使用对象存储服务 COS 时,可通过 RESTful API,对 COS 发起 HTTP 匿名请求或签名请求。

对于签名请求,COS 服务器端将会进行对请求发起者的身份验证。

  • 匿名请求:HTTP 请求不携带任何身份标识和鉴权信息,通过 RESTful API 进行 HTTP 请求操作。
  • 签名请求:HTTP 请求时添加签名,COS服务器端收到消息后,进行身份验证,验证成功则可接受并执行请求,否则将会返回错误信息并丢弃此请求。

腾讯云 COS 对象存储,基于密钥 HMAC(Hash Message Authentication Code)的自定义 HTTP 方案,进行身份验证。

在此例中,上传图片是一个签名请求,需要进行签名验证。

1. 签名流程

客户通过对 HTTP 请求进行签名,并将签名后的请求发送至腾讯云进行签名验证,具体流程如下图所示:

我们使用 SDK 开发,只需要大致了解这个流程就行。在 SDK 中已包含签名的实现,我们只需要调用 SDK 中的方法即可。

通过签名流程我们可以知道,签名需要 SecretIdSecretKey这两个信息不适合存放在客户端中,这也是我们单独部署一个鉴权服务器的主要原因。

2. 生成签名的接口

在之前的文章中,我介绍过,我在服务端使用 sanic 框架和 swagger_py_codegen 生成 Rest API。

为了完成签名生成 API,我们需要先在文档中添加 API 的相关描述。

这个接口我们要求登录才能调用。

文档定义完成之后,调用 swagger_py_codegen -s docs/v1.yml . -p apis -tlp sanic 生成代码模板。API 代码实现如下:

由于腾讯云 COS v4 的 Python SDK 只支持 Python 2,而 sanic 需要 Python 3.5+,所以,这里我 fork 出来一份添加了 Python 3 的支持,使用 Python 3 的开发者,可以使用它。

关注「知晓程序」微信公众号,回复「源码」,获取该框架下载地址。

在小程序上传图片

1. 选择图片

wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。

调用这个方法,小程序会把选择的图片放到临时路径,在小程序本次启动期间可以正常使用

如需持久保存,需再调用 wx.saveFile,在小程序下次启动时才能访问。

在小程序中,我们只能上传临时路径的文件

核心代码如下:

这里图片选择成功后,我们取原图上传到 COS。

2. 上传图片

COS 上传图片的 URL,由 cos_regionappidbucket_namecos_dir_name 等参数拼接而成。

把以下字段配置成自己的 COS 相关信息(详情可看 API 文档):

  • REGION:COS 上传的地区
  • APPID:账号的 AppId
  • BUCKET_NAME:COS Bucket 的名字
  • DIR_NAME:上传的文件目录

小程序提供了 uploadTask.onProgressUpdate() 来获取图片的上传进度,所以在这里,我将图片的上传进度显示了出来。

原文地址: https://juejin.im/post/59a23fff518825244d204d9e

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-10-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

vuex - 项目结构目录及一些简单配置

1182
来自专栏编程坑太多

eclipse 集成阿里的p3c插件

3113
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由 前情回顾 在上一篇《V...

2399
来自专栏DT乱“码”

微信小程序开发指引

官方文档教程1:http://bcoder.cn/wxopen/ 官方文档教程2:http://bing.aliaii.com/wxopen/  本文档将带你一...

52710
来自专栏React Native开发圈

React Native日期时间选择组件

date:设置初始显示的日期 mode:显示的模式,date,datetime,time format:设置日期格式,默认为'YYYY-MM-DD' confi...

1402
来自专栏DeveWork

移除 WordPress 后台“外观-主题” 管理功能

之前在本站 DeveWork.com 分享了《移除 WordPress 后台插件管理的“编辑”与“停用”功能》的方法,禁止让特定的后台管理员使用其中的“编辑”与...

1969
来自专栏梧雨北辰的开发录

删除Xcode中类似VVdocumenter(自动注释)的插件

Xcode管理插件有统一的位置,经过运行安装的插件是保存在一个文件夹中的。打开文件夹就可以删除指定的插件了 步骤:选择Finder —>选择“前往”(同时按...

3666
来自专栏IT民工生存指南

从0开始Vue.js 和 Webpack 4 [1]

1865
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——调节鼠标滚轮速度

打造前端 Deepin Linux 工作环境——调节鼠标滚轮速度 在 deepin 的系统设置里面,没有找到鼠标滚轮速度调节的选项。但是默认情况下,其滚轮的速度...

33310
来自专栏凉城

修改Windows 7 开机启动画面

2403

扫码关注云+社区

领取腾讯云代金券