diff --git a/docs/blog/.obsidian/graph.json b/docs/blog/.obsidian/graph.json new file mode 100644 index 0000000..e21a18d --- /dev/null +++ b/docs/blog/.obsidian/graph.json @@ -0,0 +1,22 @@ +{ + "collapse-filter": true, + "search": "", + "showTags": false, + "showAttachments": false, + "hideUnresolved": false, + "showOrphans": true, + "collapse-color-groups": true, + "colorGroups": [], + "collapse-display": true, + "showArrow": false, + "textFadeMultiplier": 0, + "nodeSizeMultiplier": 1, + "lineSizeMultiplier": 1, + "collapse-forces": true, + "centerStrength": 0.518713248970312, + "repelStrength": 10, + "linkStrength": 1, + "linkDistance": 250, + "scale": 1, + "close": false +} \ No newline at end of file diff --git a/docs/blog/.obsidian/workspace.json b/docs/blog/.obsidian/workspace.json index 1e8d737..8c86f71 100644 --- a/docs/blog/.obsidian/workspace.json +++ b/docs/blog/.obsidian/workspace.json @@ -148,6 +148,8 @@ }, "active": "beb8e81e9cc2b5ba", "lastOpenFiles": [ + "frontend/node/file-upload.md", + "frontend/node/oss-upload.md", "frontend/browser/cache.md", "frontend/browser/cookie-session-token.md", "frontend/browser/navigation.md", diff --git a/docs/blog/frontend/node/oss-upload.md b/docs/blog/frontend/node/oss-upload.md index 32cae2a..a658a8c 100644 --- a/docs/blog/frontend/node/oss-upload.md +++ b/docs/blog/frontend/node/oss-upload.md @@ -71,4 +71,145 @@ put(); 我们先创建个 RAM 子用户,再分配给他某些权限,这样就算泄漏了,是不是能做的事情就更少了? -当然就更安全。 \ No newline at end of file +当然就更安全。 + +![image.png](https://codertzm.oss-cn-chengdu.aliyuncs.com/20241019115747.png) + +## 上传方案 + +有了 OSS 服务之后,我们上传文件还需要经过应用服务器么? + +可以经过也可以不经过。 + +如果经过应用服务器,那就要客户端上传文件之后,我们在服务里接受文件,上传 OSS: + +![image.png](https://codertzm.oss-cn-chengdu.aliyuncs.com/20241019120056.png) + +这样当然是可以的,还能保护 accessKey 不被人窃取。 + +只是会浪费应用服务器的流量。 + +那如果不经过呢? + +![image.png](https://codertzm.oss-cn-chengdu.aliyuncs.com/20241019120109.png) +在客户端用 accessKey 把文件传到 OSS,之后把 URL 传给应用服务器就好了。 + +这样减少了应用服务器的流量消耗,但是增加了 accessKey 暴露的风险。 + +各有各的坏处。 + +那有没有啥两全其美的办法呢? + +有。 + +![image.png](https://codertzm.oss-cn-chengdu.aliyuncs.com/20241019120136.png) + + +它给出的解决方案就是生成一个临时的签名来用,代码是这样的: + +```js +const OSS = require('ali-oss') + +async function main() { + + const config = { + region: 'oss-cn-beijing', + bucket: 'guang-333', + accessKeyId: '', + accessKeySecret: '', + } + + const client = new OSS(config); + + const date = new Date(); + + date.setDate(date.getDate() + 1); + + const res = client.calculatePostSignature({ + expiration: date.toISOString(), + conditions: [ + ["content-length-range", 0, 1048576000], //设置上传文件的大小限制。 + ] + }); + + console.log(res); + + const location = await client.getBucketLocation(); + + const host = `http://${config.bucket}.${location.location}.aliyuncs.com`; + + console.log(host); +} + +main(); +``` + +前端: + +```html + + +
+ + +