小程序oss开发

suiyuankj 2019-4-19 小程序 3,994 小程序oss开发已关闭评论 1

在写这篇文章之前相信很多小伙伴都遇到小程序开发oss的很多问题,穗源网络科技作为开发公司的我们也是遇到这样的情况,但我们也是毫无保留的把经验传授给大家,让大家受益,如果阅读文章中遇到一些代码风格和逻辑和我们不一样的请不要转牛角尖来吐槽,每个人有每个人写代码的风格,我们坚持是大家能看懂,代码能顺利运行为准。

下面我们开始讲解整个在小程序上开发oss的逻辑和流程,在开发过程中一个困扰就是阿里云提供的api文档还没达到那个深度看不懂,其实我们也有这个问题,但是阿里云提供了一些案例,根据案例的逻辑我们可以做出一样的效果。

这里我也把阿里云提供的那个连接地址给大家下载:点击下载

下载后解压是得到这几个文件

oss 官方文件

分别打开index.html和upload.js文件,我们会发现他们的逻辑是没有那么复杂的,在没有认真看阿里云提供的api文档下还是可以轻松推理出这个文件的开发逻辑。在index.html文件中的最底部可以发现他需要加载使用的文件有哪些,下图可以看出都是一些加密的函数文件,可以得出是用于接口传输加密使用。

js加载文件

然后打开upload.js文件里面,我们找到一个函数set_upload_param,在这个函数中发现了他们加密的结构,根据下图的加密变量我们可以找出加密的出处。

oss头部信息加密函数

key的加密结果出自js文件里面的get_uploaded_object_name函数,

key头部相关信息的函数处理

policyBase64和signature的结果也相应在js文件里面,由下图可以看到他是写在函数外围的全局变量。

signature加密

详细的加密过程可以根据阿里云提供的api文档结合研究。

阿里云签名文档
阿里云签名文档

看了那么久我们也大概清楚阿里云上传接口是由key,policy,OSSAccessKeyId,success_action_status,signature组成的,我们在小程序上也相应的做这几个流程操作即可。

下面是小程序的真正操刀,废话那么多,小伙伴都激动了吧。

我们先在阿里云上进行相应的设置配置,

配置 Bucket 跨域

客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的验证。因此需要为 Bucket 设置跨域规则以支持 Post 方法。具体操作步骤请参见设置跨域访问

配置外网域名到小程序的上传域名白名单中

1、登录微信小程序平台,配置小程序的上传域名白名单。

通过 OSS 控制台查看外网域名。

2、登录微信小程序平台,配置小程序的上传域名白名单

登录微信小程序平台,配置小程序的上传域名白名单

转载请注明来自穗源博客,本文标题:《小程序oss开发》

喜欢 (1) 发布评论
Top