在我们日常开发中,经常会遇到用户上传图片、视频的需求。
这类需求的传统实现方案是用户上传的图片、视频需要先上传到 Web 服务器再中转到 OSS 服务器,这样做会有几个问题:
- 客户端并发上传,对服务器带宽和性能都是不小的压力;
- 文件中转,需要耗费更多的流量和时间;
- 无法做到上传进度展示(Web 服务器中转上传时间未知)。
但是如果直接在前端进行签名上传的话,就会有安全问题(泄露秘钥),因此就有了服务端签名,前端直传方案。
方案流程
- 官方相关文档:https://help.aliyun.com/document_detail/31926.html。
- 如果需要获取上传回调,进行特殊操作,可以查看服务端签名直传并设置上传回调:https://help.aliyun.com/document_detail/31927.html。
![07c431cf80de50c9805717190e180b17.png](https://i-blog.csdnimg.cn/blog_migrate/b79976371ccdb01ccba8231ad60f3a07.png)
服务端签名
这里使用 nodejs 作为示例。有官方的 SDK,省去我们对接阿里云 HTTP 接口造轮子的时间。
安装 SDK
我使用的 sdk 是 ali-oss:https://github.com/ali-sdk/ali-oss。
吐槽下,阿里 sdk 命名不统一,
@alicloud/xxx
,ali_sdk/xxx
...
执行 npm install 安装 sdk。
npm install ali-oss --save
构建 Post Policy,获取上传签名
这里可以参照下官方 SDK 的 demo:https://github.com/ali-sdk/ali-oss/blob/master/example/server/postObject.js
const config = {
Post Policy 的详细介绍:https://help.aliyun.com/document_detail/31988.html
必须包含 expiration 和 conditions。
Expiration: 指定过期时间 Conditions:是一个列表,用来指定 Post 请求的表单域合法值。
Conditions 使用方式见下图:
![81770dc133486ad3bfdf4bdeaa248fb4.png](https://i-blog.csdnimg.cn/blog_migrate/f715039033578222232f0d3d4951b6dd.png)
前端使用签名直传
这里以支付宝小程序为例,其他平台类似。
// 假设服务端获取上传签名接口返回值存储到 apiRet 变量
需要注意的安全问题
有一个安全问题需要注意,如果黑客获取签名后,可以直接伪造请求,覆盖之前用户上传的图片,假如用户之前上传的是自己的付款码,可以直接修改为黑客的付款码。
解决方案
生成签名时,conditions 指定 key 前缀(可以使用基于时间戳的 uuid 或 user id),前端上传时,使用该前缀 key + 前端 key 上传。
那今天关于阿里云 OSS 前端直传的分享就到这啦~
关注公众号,第一时间接收推送哦~
![1e94b89919011e5f77bfc655098fef3a.gif](https://i-blog.csdnimg.cn/blog_migrate/389817f4b1239984f56329b8fee48eda.gif)
点击 “分享”
让更多人看到,点击 “在看”
支持我继续创作。
* 本文原创,未经本人同意,禁止转载