返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

小程序开发上传图片如何实现

2018-02-28 作者:黄珊

 

  很多小程序都为用户提供图片上传功能。这时候,使用一些「对象存储」云服务,也许是最快、最经济的选择。那么,小程序该如何使用这类服务呢?使用的时候,又应该注意哪些问题呢?

  小功能程序今天分享的这篇文章,会以腾讯云的对象存储服务为例,教大家将小程序接入对象存储服务。

小程序开发上传图片如何实现


  准备工作

  上传图片,主要是将图片上传到腾讯云对象存储(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 中的方法即可。通过签名流程我们可以知道,签名需要 SECRTID和 secretkey,这两个信息不适合存放在客户端中,这也是我们单独部署一个鉴权服务器的主要原因。

  2. 生成签名的接口在之前的文章中,我介绍过,我在服务端使用 sanic 框架和 swagger_py_codegen生成 Rest API。为了完成签名生成 API,我们需要先在文档中添加 API 的相关描述。这个接口我们要求登录才能调用。

  文档定义完成之后,调用 swagger_py_codegen>s docs/v1.ym1 . p apis -tlp sanic生成代码模板。API 代码实现如下:由于腾讯云 COS v4 的 Python SDK 只支持 Python 2,而 sanic 需要 Python 3.5+,所以,这里我 fork 出来一份添加了 Python 3 的支持,使用 Python 3 的开发者,可以使用它。

  上传的文件目录

小程序开发上传图片如何实现

  在此来获取图片的上传进度,所以在这里,我将图片的上传进度显示了出来。
 

HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。

更多小程序开发案例,尽在:http://www.hishop.com.cn/xiaocx/kaifa.html

线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银,提升门店经营效率。

  • 进销存管理

    系统自带进销存管理,更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

推荐文章

门店系统 获取报价 立即咨询 免费试用