V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
mao13820
V2EX  ›  问与答

有没有基于 oss 的静态网页做的网盘

  •  
  •   mao13820 · 2022-04-21 18:33:21 +08:00 · 1734 次点击
    这是一个创建于 954 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我想要一个静态的网页,不涉及后端。直接用前端调用 oss 的 api 完成文件上传,文件列表显示和下载,实现基本的网盘功能。

    感觉这个非常方便,不需要购买云主机,直接把静态网页也托管在 oss 上就好了。平时只有储存的费用。

    我知道这有风险,毕竟 api key 直接在前端暴露。但是我主要是几个朋友之间小规模用,再加上设置好足够的权限和资源限制,可以把风险控制住。

    不知道有没有现成的项目,可以直接使用的?

    我用阿里云的教程,搭了一个纯静态的,上传的网页,但是文件列表显示与下载的那个网页没做成,不知道要怎么实现?

    谢谢各位

    14 条回复    2022-04-22 03:45:16 +08:00
    Chad0000
        1
    Chad0000  
       2022-04-21 18:40:39 +08:00
    Cloudflare Pages ,网页放 Git 中,免费不要钱。只是不要传太大文件。
    mao13820
        2
    mao13820  
    OP
       2022-04-21 18:46:58 +08:00
    @Chad0000 谢谢。我主要是不知道怎么写那个静态网页。我想写个包含上传文件,显示文件列表,下载文件这三个功能的静态网页。具体操作是调用对象存储的 api 完成的,文件平时就放在 oss 中,网页托管在 git 或者 oss 中。这样就不需要服务器了。
    Chad0000
        3
    Chad0000  
       2022-04-21 18:54:39 +08:00
    @mao13820
    如果要用 OSS ,你可以用 JS 把 API Key 加密,密码在页面上手动输入,这样就不是特别担心 API Key 暴露。或者每次输入 API Key 也行。
    TMaize
        4
    TMaize  
       2022-04-21 18:55:00 +08:00
    yin1999
        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
    yin1999
        6
    yin1999  
       2022-04-21 19:29:04 +08:00
    @yin1999 补充一下,因为文件上传到一半后中断的话,OSS 会默认保留文件,所以文件上传那块是有做 md5 校验的( WebAssembly ),如果不需要这个,或者要用其它的 md5 库,可以自己改哈。
    mao13820
        7
    mao13820  
    OP
       2022-04-21 20:43:57 +08:00
    @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
    yin1999
        8
    yin1999  
       2022-04-21 21:48:32 +08:00 via Android
    @mao13820 这个是引用的图标缺失的问题,项目不是很完整,路径、资源文件引用啥的也得改改
    sommer
        9
    sommer  
       2022-04-21 21:52:28 +08:00 via Android
    那为什么不直接用对象存储自己的控制台呢?
    A01514035
        10
    A01514035  
       2022-04-21 21:55:50 +08:00
    @sommer #9 几个朋友之间小规模用,别人没有账号密码吧
    sommer
        11
    sommer  
       2022-04-21 21:57:21 +08:00 via Android
    @A01514035 可以分配子账号,只给对象存储的权限,读写,只读,只写,某个文件或者文件夹的读写只读只写,都可以精细控制
    cheese
        12
    cheese  
       2022-04-21 23:14:26 +08:00
    列表显示有 listV2 方法,但是 oss 是对象储存,所以需要你自己去处理路径,模拟文件夹,如果是小文件多的话,还得做好列表渲染优化。
    实际上阿里云官方的客户端就挺好用的,你只要在 ram 控制里,设定好你每个朋友的权限就行了,oss 权限我记得甚至可以设定到一个文件夹(不太确定了,之前好像看过)。用那个更加方便
    mao13820
        13
    mao13820  
    OP
       2022-04-22 03:44:45 +08:00 via Android
    @cheese 谢谢,主要是登录太麻烦了。我想的是,打开即用,上传和下载可以随手。
    mao13820
        14
    mao13820  
    OP
       2022-04-22 03:45:16 +08:00 via Android
    @yin1999 好的,我研究看看,谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2592 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 03:06 · PVG 11:06 · LAX 19:06 · JFK 22:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.