我想要一个静态的网页,不涉及后端。直接用前端调用 oss 的 api 完成文件上传,文件列表显示和下载,实现基本的网盘功能。
感觉这个非常方便,不需要购买云主机,直接把静态网页也托管在 oss 上就好了。平时只有储存的费用。
我知道这有风险,毕竟 api key 直接在前端暴露。但是我主要是几个朋友之间小规模用,再加上设置好足够的权限和资源限制,可以把风险控制住。
不知道有没有现成的项目,可以直接使用的?
我用阿里云的教程,搭了一个纯静态的,上传的网页,但是文件列表显示与下载的那个网页没做成,不知道要怎么实现?
谢谢各位
1
Chad0000 2022-04-21 18:40:39 +08:00
Cloudflare Pages ,网页放 Git 中,免费不要钱。只是不要传太大文件。
|
2
mao13820 OP @Chad0000 谢谢。我主要是不知道怎么写那个静态网页。我想写个包含上传文件,显示文件列表,下载文件这三个功能的静态网页。具体操作是调用对象存储的 api 完成的,文件平时就放在 oss 中,网页托管在 git 或者 oss 中。这样就不需要服务器了。
|
3
Chad0000 2022-04-21 18:54:39 +08:00
@mao13820
如果要用 OSS ,你可以用 JS 把 API Key 加密,密码在页面上手动输入,这样就不是特别担心 API Key 暴露。或者每次输入 API Key 也行。 |
4
TMaize 2022-04-21 18:55:00 +08:00
|
5
yin1999 2022-04-21 19:20:59 +08:00
我之前做过一个,讲一下我做的思路:
1. API Key 用 AES-GCM 加密,放 OSS 里面,并设置权限为公开 2. 放置文件的目录权限设置成私密,只允许带权限访问 3. 前端访问的时候,要登录输入密码,这个密码就是 API key 的加密密钥,如果解密成功,就能获取 API key ,从而在前端通过调用 API Key 来访问私密文件夹 4. 关于文件列出这一块,可以配合函数计算服务,在阿里云函数计算那边弄一个 OSS 触发的函数计算服务,它能够在文件列表发生变化时,将当前目录下的文件目录写道一个专门列出文件列表的目录下,并以 JSON 格式存储,前端可以直接调用获取。当然,这块也可以通过调用 API 直接列出目录,这个实时性较高。 附一个之前写的,很(非常)简陋的项目(不带函数计算那块,文件权限那块也没弄,默认是公开访问,仅上传需要 API Key ,这个可以自己改)。核心代码就是 scripts 里面的 fileManager.js ,实现了上传、登录、文件列出、删除这几个功能,如果还需要其它的功能,可以参照阿里云 OSS 的 API 文档自己加。 https://asset.dvlp4.fun/file-share/fileLister.zip |
6
yin1999 2022-04-21 19:29:04 +08:00
@yin1999 补充一下,因为文件上传到一半后中断的话,OSS 会默认保留文件,所以文件上传那块是有做 md5 校验的( WebAssembly ),如果不需要这个,或者要用其它的 md5 库,可以自己改哈。
|
7
mao13820 OP @yin1999 非常感谢,我下载下来试了一下,发现无法直接打开,有以下报错。不知如何处理,谢谢
Failed to load resource: net::ERR_FILE_NOT_FOUND index.full.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND index.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND index.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND index.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND upload.svg:1 Failed to load resource: net::ERR_FILE_NOT_FOUND |
9
sommer 2022-04-21 21:52:28 +08:00 via Android
那为什么不直接用对象存储自己的控制台呢?
|
11
sommer 2022-04-21 21:57:21 +08:00 via Android
@A01514035 可以分配子账号,只给对象存储的权限,读写,只读,只写,某个文件或者文件夹的读写只读只写,都可以精细控制
|
12
cheese 2022-04-21 23:14:26 +08:00
列表显示有 listV2 方法,但是 oss 是对象储存,所以需要你自己去处理路径,模拟文件夹,如果是小文件多的话,还得做好列表渲染优化。
实际上阿里云官方的客户端就挺好用的,你只要在 ram 控制里,设定好你每个朋友的权限就行了,oss 权限我记得甚至可以设定到一个文件夹(不太确定了,之前好像看过)。用那个更加方便 |