在我们日常开发中，经常会遇到用户上传图片、视频的需求。
这类需求的传统实现方案是用户上传的图片、视频需要先上传到 Web 服务器再中转到 OSS 服务器，这样做会有几个问题：
-
客户端并发上传，对服务器带宽和性能都是不小的压力； -
文件中转，需要耗费更多的流量和时间； -
无法做到上传进度展示（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 = {
accessKeyId: '',
accessKeySecret: '',
// 上传 bucket endpoint
endpoint: ''
bucket: ''
}
// 从初始化 OSS
const client = new OSS(config)
// 构建 policy 对象
const date = new Date();
// 获取过期时间为1天，这里可以根据情况，自己设置过期时间
date.setDate(date.getDate() + 1)
const policy = {
expiration: date.toISOString(), // 请求有效期
conditions: [
['content-length-range', 0, 1048576000], // 设置上传文件的大小限制
{ bucket: client.options.bucket } // 限制可上传的bucket（可选）
]
}
// 获取上传签名
const formData = await client.calculatePostSignature(policy)
// 返回给前端
return {
formData,
url: config.endpoint
}
Post Policy 的详细介绍：https://help.aliyun.com/document_detail/31988.html
必须包含 expiration 和 conditions。
Expiration: 指定过期时间
Conditions：是一个列表，用来指定 Post 请求的表单域合法值。
Conditions 使用方式见下图：
前端使用签名直传
这里以支付宝小程序为例，其他平台类似。
// 假设服务端获取上传签名接口返回值存储到 apiRet 变量
/**
* apiRet: {
* url: 'oss上传url',
* formData: {
* // ... 上传所需参数、签名
* }
* }
*/
alipay.uploadFile({
url: apiRet.url,
formData: {
// 存储到 bucket 的路径
key: "",
// 设置成功返回的状态值 200
success_action_status: 200,
// 解构 接口返回 formData
...apiRet.formData,
},
// 文件名一定要是 file
name: "file",
// 支付宝小程序需要指定
fileType: "image",
filePath: "",
});
需要注意的安全问题
有一个安全问题需要注意，如果黑客获取签名后，可以直接伪造请求，覆盖之前用户上传的图片，假如用户之前上传的是自己的付款码，可以直接修改为黑客的付款码。
解决方案
生成签名时，conditions 指定 key 前缀（可以使用基于时间戳的 uuid 或 user id），前端上传时，使用该前缀 key + 前端 key 上传。
那今天关于阿里云 OSS 前端直传的分享就到这啦~
评论