thumbnails阿里云oss_阿里云前端 OSS 直传

在我们日常开发中，经常会遇到用户上传图片、视频的需求。

这类需求的传统实现方案是用户上传的图片、视频需要先上传到 Web 服务器再中转到 OSS 服务器，这样做会有几个问题：

1. 客户端并发上传，对服务器带宽和性能都是不小的压力；
2. 文件中转，需要耗费更多的流量和时间；
3. 无法做到上传进度展示(Web 服务器中转上传时间未知)。

但是如果直接在前端进行签名上传的话，就会有安全问题(泄露秘钥)，因此就有了服务端签名，前端直传方案。

方案流程

• 官方相关文档：https://help.aliyun.com/document_detail/31926.html。
• 如果需要获取上传回调，进行特殊操作，可以查看服务端签名直传并设置上传回调：https://help.aliyun.com/document_detail/31927.html。

服务端签名

这里使用 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 使用方式见下图：

前端使用签名直传

这里以支付宝小程序为例，其他平台类似。

// 假设服务端获取上传签名接口返回值存储到 apiRet 变量

需要注意的安全问题

有一个安全问题需要注意，如果黑客获取签名后，可以直接伪造请求，覆盖之前用户上传的图片，假如用户之前上传的是自己的付款码，可以直接修改为黑客的付款码。

解决方案

生成签名时，conditions 指定 key 前缀(可以使用基于时间戳的 uuid 或 user id)，前端上传时，使用该前缀 key + 前端 key 上传。

那今天关于阿里云 OSS 前端直传的分享就到这啦~

关注公众号，第一时间接收推送哦~

点击 “分享” 让更多人看到，点击 “在看” 支持我继续创作。

* 本文原创，未经本人同意，禁止转载