回顾
前文《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 将结果响应给客户端
这一块内容在文档中有详细的介绍，可以参考：
