前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >小程序开发:上传图片到腾讯云

小程序开发:上传图片到腾讯云

作者头像
goodspeed
发布于 2020-12-22 06:15:33
发布于 2020-12-22 06:15:33
15.4K00
代码可运行
举报
文章被收录于专栏:厉害了程序员厉害了程序员
运行总次数:0
代码可运行

这是小程序开发第二篇,主要介绍如何上传图片到腾讯云,之所以选择腾讯云,是因为腾讯云免费空间大?

准备工作

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

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

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

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

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

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

小程序上传图片到 cos 流程如下图:

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

COS鉴权服务

使用对象存储服务 COS 时,可通过 RESTful API 对 COS 发起 HTTP 匿名请求或 HTTP 签名请求,对于签名请求,COS 服务器端将会进行对请求发起者的身份验证

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

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

上传图片是一个签名请求,需要进行签名验证。之所以我们

签名流程

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

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

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

签名生成 API

上一篇小程序开发:python sanic 实现小程序登录注册 我们介绍过,服务端使用sanic 框架 + swagger_py_codegen 生成 rest-api。

添加签名生成 api 我们需要先在文档中添加 API 的相关描述。文档代码:https://github.com/gusibi/Metis/blob/master/docs/v1.yml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    /qc_cos/config:
        get:
            summary: 腾讯云配置
            description: 腾讯云配置
            tags: [Config]
            operationId: get_qc_cos_config
            parameters:
                - $ref: '#/parameters/AccessToken'
                - $ref: '#/parameters/qcos_path_in_query'
            responses:
                200:
                    schema:
                        $ref: '#/definitions/QCOSConfig'
                default:
                    description: Unexpected error
                    schema:
                        $ref: '#/definitions/Error'
            security:
                - OAuth2: [open]

这个接口我们要求登录才能调用。文档定义完成之后,调用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
swagger_py_codegen -s  docs/v1.yml . -p apis -tlp sanic

生成代码模板,API 代码实现如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    from qcloud_cos.cos_auth import Auth
    
    async def get(self, request):
        auth = Auth(appid=Config.QCOS_APPID,
                    secret_id=Config.QCOS_SECRET_ID,
                    secret_key=Config.QCOS_SECRET_KEY)
        expired = time() + 3600 # 签名有效时间 3600 秒
        # 上传到 cos bucket 的目录
        dir_name = request.raw_args.get('cos_path', '/xrzeti')
        # 生成签名
        sign = auth.sign_more(Config.QCOS_BUCKET_NAME,
                              cos_path=dir_name,
                              expired=expired)
        return {"sign": sign}, 200

由于 腾讯云COSv4 的Python SDK 只支持 python2,而 sanic 需要 python3.5+ 所以,这里我 fork 出来一份添加了 python3 的支持。https://github.com/gusibi/cos-python-sdk-v4。使用 python3 环境的可以使用这个版本。

上传图片到 cos

选择图片

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

调用这个方法,小程序会把选择的图片放到临时路径(在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到),我们只能将临时路径的文件上传。

核心代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    uploadToCos: function () {
        var that = this;

        // 选择上传的图片
        wx.chooseImage({
            sizeType: ['original', 'compressed'], // 图片类型 original 原图,compressed 压缩图,默认二者都有
            success: function (res) {

                // 获取文件路径
                var file = res.tempFiles[0];
                console.log(file.size);

                // 获取文件名
                var fileName = file.path.match(/(wxfile:\/\/)(.+)/)
                fileName = fileName[2]

                // 获取到图片临时路径后,指定文件名 上传到cos
                upload(file.path, fileName, that);
            }
        })
    }

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

上传图片

cos 上传图片的URL由 cos_region,appid,bucket_name和 cos_dir_name 拼接而成。把以下字段配置成自己的cos相关信息,详情可看API文档

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cosUrl = "https://" + REGION + ".file.myqcloud.com/files/v2/" + APPID + "/" + BUCKET_NAME + DIR_NAME;

REGION: cos上传的地区APPID: 账号的appidBUCKET_NAME: cos bucket的名字DIR_NAME: 上传的文件目录

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var config = require('../config.js');
// 先确定上传的 URL
var cosUrl = "https://" + config.cos_region + ".file.myqcloud.com/files/v2/" + config.cos_appid + "/" + config.cos_bucket_name + config.cos_dir_name;

//填写自己的鉴权服务器地址
var cosSignatureUrl = config.host + '/v1/qc_cos/config?cos_path=' + config.cos_dir_name;

/**
 * 上传方法
 * filePath: 上传的文件路径
 * fileName: 上传到cos后的文件名
 * that: 小程序所在当前页面的 object
 */
function upload(filePath, fileName, that) {
    var data;

    // 鉴权获取签名
    wx.request({
        url: cosSignatureUrl,
        header: {
            Authorization: 'JWT' + ' ' + that.data.jwt.access_token
        },
        success: function (cosRes) {
            // 获取签名
            var signature = cosRes.data.sign;

            // 头部带上签名,上传文件至COS
            var uploadTask = wx.uploadFile({
                url: cosUrl + '/' + fileName,
                filePath: filePath,
                header: {
                    'Authorization': signature
                },
                name: 'filecontent',
                formData: {
                    op: 'upload'
                },
                success: function (uploadRes) {
                    // 上传成功后的操作
                    var upload_res = JSON.parse(uploadRes.data)
                    var files = that.data.files;
                    files.push(upload_res.data.source_url);
                    that.setData({
                        upload_res: upload_res,
                        files: files,
                        test_image: upload_res.data.source_url
                    })
                },
                fail: function (e) {
                    console.log('e', e)
                }
            });
            // 上传进度条
            uploadTask.onProgressUpdate((res) => {
                that.setData({
                    upload_progress: res.progress
                })
                if (res.progress === 100){
                    that.setData({
                        upload_progress: 0
                    })
                }
            })
        }
    })
    return data
}

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

完整代码参考:metis-wxapp: https://github.com/gusibi/Metis-wxapp

参考链接


最后,感谢女朋友支持。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-08-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 四月 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序图片上传功能
 简单画一个页面,使用按钮调小程序默认的upload(page, path)方法,默认支持单次上传一张图片,可修改
用户10175992
2023/10/17
3470
小程序图片上传功能
开发 | 手把手,教你为小程序添加「上传图片」功能
很多小程序都为用户提供图片上传功能。这时候,使用一些「对象存储」云服务,也许是最快、最经济的选择。
知晓君
2018/07/27
2.7K0
对象储存cos-腾讯云对象储存cos
COS是腾讯云提供的对象存储服务,功能非常强大,可以作为文件服务器,CDN加速,静态网页服务,还提供了图片的常用操作。
张天华
2019/08/01
24.2K0
对象储存cos-腾讯云对象储存cos
微信小程序上传图片到腾讯COS存储桶实战
作者:火种 最近为了实现在小程序上传图片到腾讯COS存储桶,把官方提供的demo,看了一遍又一遍,试了又试,错了又错,踏过一个又一个坑,终于从不懂,到懵懂,到懂。>.<,好累,在此过程就不赘述,直接开始,希望和我一样的小白也可能轻松用上腾讯COS存储桶。
加菲猫的VFP
2022/05/26
3.8K0
微信小程序上传图片到腾讯COS存储桶实战
存储腾讯云(例:上传图片)
服务器属于个人的,需要一定的权限才能自由上传图片,这个负责权限验证的其实就是秘钥。拥有秘钥是进行上传的基础条件。
玖柒的小窝
2021/10/26
16.4K0
存储腾讯云(例:上传图片)
Beego学习——腾讯云上传图片
一、腾讯云对象存储COS 1. 创建储存桶 然后直接下一步-创建即可。 2. API密钥创建 3. 查看代码中需要的东西 储存桶名称Bucket、所属地域Region 密钥APPID、SecretId、SecretKey 二、代码 1. 配置文件 app.conf 将上面查看的几个值写入配置文件对应位置即可 # TencentCloud 腾讯云 # 储存桶名称 COS_BUCKET_NAME = "" # 所属地域 COS_REGION =
传说之下的花儿
2023/04/16
6.5K0
Beego学习——腾讯云上传图片
如何优雅地使用腾讯云COS-.NET篇
代码下载地址 https://github.com/whuanle/txypx20190809
痴者工良
2019/08/09
3.5K11
微信小程序上传图片
//添加图片 joinPicture: function (e) { var index = e.currentTarget.dataset.index; var evalList = this.data.evalList; var that = this; var imgNumber = evalList[index].tempFilePaths; if (imgNumber.length >= 3) { wx.showModal({
达达前端
2022/04/29
1.6K0
gin——使用腾讯云存储图片
一、腾讯云对象存储COS 1. 创建储存桶 然后直接下一步-创建即可。 2. API密钥创建 3. 查看代码中需要的东西 储存桶名称Bucket、所属地域Region 密钥APPID、SecretId、SecretKey 二、代码 1. 配置文件conf.toml 这里读取配置文件的第三方库是Viper,学习可以查看:viper库快速使用 将上面查看的几个值写入配置文件对应位置即可 [tencentCOS] # TencentCloud 腾讯云
传说之下的花儿
2023/04/16
9.4K1
gin——使用腾讯云存储图片
微信小程序开发之多图片上传+服务端接收
  业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存。
追逐时光者
2019/08/28
2.2K0
微信小程序开发之多图片上传+服务端接收
小程序的全栈开发新时代
小程序·云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力,简言之就是:云能力将会成为小程序的基础能力。整套功能是基于腾讯云全新推出的云开发(Tencent Cloud Base)所研发出来的一套完备的小程序后台开发方案。
游魂
2018/10/10
5440
小程序的全栈开发新时代
微信小程序开发(二)图片上传+服务端接收
这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的php,只能自己去改接收图片的接口。
开发者技术前线
2020/11/23
2.2K0
微信小程序开发(二)图片上传+服务端接收
小程序上传多张图片到springboot后台,返回可供访问的图片链接
其实这两个截图就可以看出,我们图片上传成功了,并且给小程序前端返回了可供访问的图片url。
编程小石头
2020/05/30
1.7K0
小程序上传多张图片到springboot后台,返回可供访问的图片链接
小程序上传多张图片到springboot后台,返回可供访问的图片链接
其实这两个截图就可以看出,我们图片上传成功了,并且给小程序前端返回了可供访问的图片url。 话不多说,直接看代码。
编程小石头
2020/10/22
2.2K0
小程序上传多张图片到springboot后台,返回可供访问的图片链接
小程序的全栈开发新时代
小程序·云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力,简言之就是:云能力将会成为小程序的基础能力。整套功能是基于腾讯云全新推出的云开发(Tencent Cloud Base)所研发出来的一套完备的小程序后台开发方案。
李成熙heyli
2018/09/18
14K2
小程序的全栈开发新时代
微信小程序文件上传下载应用场景
草小灰
2016/09/28
12.9K5
微信小程序文件上传下载应用场景
Java微信公众平台开发_07_JSSDK图片上传
(2)对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式 (即 key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
shirayner
2018/08/10
2.5K0
Java微信公众平台开发_07_JSSDK图片上传
微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载
也为其提供了视频和图片的二合一接口,这个接口不建议调用,图片和视频的上传建议区分开。
Kindear
2020/02/23
2.1K0
微信小程序使用腾讯云对象储存上传图片
对象存储(Cloud Object Storage,COS)控制台提供存储数据概览页面,您可以在该页面中查看存储桶数量、对象数量、存储用量、请求数以及流量等数据。
lyudev
2022/08/04
9.4K0
微信小程序使用腾讯云对象储存上传图片
如何在小程序中实现人脸识别功能
在如何在小程序中实现文件上传下载文章中,我们介绍了小程序的上传基本使用教程,文末我们留下了一个引子。本文将介绍在小程序端,使用腾讯云云智AI应用服务来进行人脸识别检测分析,实现人脸识别等功能。
腾讯云AI
2019/03/01
5.9K0
推荐阅读
相关推荐
小程序图片上传功能
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文