回顾
前文《Nestjs+Vue实现阿里云OSS服务端签名直传》详细介绍了如何在 Nest 服务端基于 Post Policy 生成临时签名,响应给客户端,再由客户端实现文件直传 OSS 的过程。
这种方案的优点是能减轻应用服务器的压力,节省流量,最重要是安全。但是在客户端将文件上传到 OSS 的结果如何,文件存储的地址,文件大小等信息,客户端和服务端都全然不知。
所以在前面的基础上,可以再加上一个步骤,设置上传回调,这样 OSS 完成文件存储后,可以将相关信息响应给服务端,服务端将处理结果再响应给 OSS ,再由 OSS 将信息响应给客户端。整个流程如下:
准备
需要准备一个域名和一台有公网IP的服务器,将域名解析到服务器上,在服务器中运行 Nest 程序,用来和 OSS 服务通信。
存储桶的跨域设置
前文中将允许的来源设置为了 *,现在改为真实的域名。
在存储桶中选择“数据安全” - “跨域设置”,编辑跨域规则:
Nest 服务端
使用前文示例的代码,只需要做一些小小的改动即可。
添加路由方法
在 oss.controller.ts
中新增一个控制器方法,用来处理 OSS 发来的回调请求。从请求头中解析出 x-oss-pub-key-url
,用来判断请求来源,并且从请求体中解析出文件信息。
import {
Controller, Get, Post } from '@nestjs/common';
import {
OssService } from './oss.service';
@Controller('oss')
export class OssController {
constructor(private oss: OssService) {
}
// 接收 OSS 回调
@Post('result')
getResult(@Headers('x-oss-pub-key-url') xOssPubKeyUrl: string, @Body() file: any) {
return this.oss.getResult(xOssPubKeyUrl, file);
}
}
添加服务方法
在 oss.service.ts
先修改原来的 getSignature
方法,生成签名等信息后,还要设置回调请求需要的参数:
async getSignature() {
const config = {
// ...
// 设置上传回调URL,即回调服务器地址,用于处理应用服务器与 OSS 之间的通信
// OSS 会在文件上传完成后,把文件信息通过此回调URL发送给应用服务器
callbackUrl: 'http://kunwu.tech:3000/oss/result',
};
// 上传回调。
const callback = {
// 设置回调请求的服务器地址
callbackUrl: config.callbackUrl,
// 设置回调的内容,${object} 等占位符会由 OSS 进行填充
// ${object}表示文件的存储路径,${mimeType}表示资源类型,对于图片类型的文件,可以通过${imageInfo.height}等去设置宽高信息
callbackBody:
'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}',
// 设置回调的内容类型,也支持 application/json
callbackBodyType: 'application/x-www-form-urlencoded',
};
// 响应给客户端的签名和策略等信息
return {
// ...
// 传给客户端的回调参数,需要通过Buffer.from 对 JSON 进行 Base64 编码
callback: Buffer.from(JSON.stringify(callback)).toString('base64'),
};
还需要再增加一个方法,来处理 OSS 发来的请求。它接收控制器传递的两个参数,判断请求来源是 OSS 服务器之后,就可以将文件信息响应给客户端:
async getResult(xOssPubKeyUrl: string, file: any) {
// 通过 Base64 解码公钥地址
const pubKeyAddr = Buffer.from(xOssPubKeyUrl, 'base64').toString('ascii');
// 判断请求头中的 x-oss-pub-key-url 是否来源于OSS服务器
if (!pubKeyAddr.startsWith('https://gosspublic.alicdn.com/')) {
// 如果不是来源于OSS服务器,则返回 “verify not ok”,表明回调失败
return {
status: 'verify not ok',
};
}
// 如果 x-oss-pub-key-url 来源于OSS服务器,则返回“Ok”和文件信息,表明回调成功
return {
status: 'Ok',
file,
};
}
前端
在前面的基础之上,现在向服务器请求签名信息返回的结果中会包含一条 callback
:
向 OSS 上传文件时,需要将 callback
也携带上:
// 使用Policy和签名上传图片到 OSS
const handleUpload = async () => {
// .....
const ossData = await getOssData()
// .....
// 设置回调信息
formdata.append('callback', ossData.callback)
}
在浏览器中选择一个文件上传到 OSS,查看下响应信息:
可以看到,这个信息就是我们在服务端设置的 /oss/result
接口的返回的数据:
return {
status: 'Ok',
file,
};
总结
代码已上传,点击这里查看。
本文在上篇文章的基础上,增加了设置回调请求的步骤,这样就形成了一个完整的闭环:
客户端上传文件前,先请求临时签名
服务端生成临时签名,并设置回调请求地址
客户端拿到签名、回调请求地址等信息后,将文件上传到 OSS
- OSS 完成文件存储后,按照回调地址将结果发送给服务器
- 服务器处理完后,将结果响应给 OSS
- 最后 OSS 将结果响应给客户端
这一块内容在文档中有详细的介绍,可以参考: