V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lizheming
V2EX  ›  分享创造

七牛图床之花式传图

  •  2
     
  •   lizheming ·
    lizheming · 2015-09-20 23:06:03 +08:00 · 3572 次点击
    这是一个创建于 3351 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先放上网址: http://y.eming.li

    之前豆多任性用的 SAE 当图床,然后做大死豆没了(喜闻乐见...
    图床的需求是刚需,而七牛的免费额度还是比较给力的,所以利用七牛做了这么一个传图工具
    主要特点是支持多种上传方式,包括:普通上传,粘贴图片,粘贴网址,拖拽图片,拖拽文件夹多种方式上传。
    默认是放在我的账号下的,会不定时清空图片,为了图片长期存在且不浪费我账号的额度,长时间使用请自行配置账号。

    第 1 条附言  ·  2015-09-21 09:41:34 +08:00
    关于自己设置账号其实算是个彩蛋的 T_T
    不过看起来似乎没人发现呢
    那就给个提醒大家开一下控制台吧 T_T
    50 条回复    2015-09-23 11:24:25 +08:00
    Strikeactor
        1
    Strikeactor  
       2015-09-20 23:12:27 +08:00
    赞,平时给别人临时分享文件都是用的这位老兄的
    http://lab.wong2.me/doora/

    感谢你们
    lizheming
        2
    lizheming  
    OP
       2015-09-20 23:17:12 +08:00
    @Strikeactor 这个好棒!!收藏了!不过这位大大把 key 写在页面里这样似乎不大好诶....
    pmpio
        3
    pmpio  
       2015-09-20 23:33:51 +08:00
    pmpio
        4
    pmpio  
       2015-09-20 23:34:41 +08:00
    pmpio
        5
    pmpio  
       2015-09-20 23:35:41 +08:00
    @Strikeactor 这个图床在 V2EX 用不了。。。。
    wzxjohn
        6
    wzxjohn  
       2015-09-20 23:36:18 +08:00
    @pmpio 回帖默认不支持 MarkDown 。。。
    pmpio
        7
    pmpio  
       2015-09-20 23:36:54 +08:00
    pmpio
        8
    pmpio  
       2015-09-20 23:37:34 +08:00
    @wzxjohn 晕,原来如此!!!
    mutoulbj
        10
    mutoulbj  
       2015-09-21 09:34:24 +08:00
    点错传了个大文件,页面崩溃了。。。
    cai314494687
        11
    cai314494687  
       2015-09-21 09:34:39 +08:00
    跟这个类似 http://yotuku.cn/


    你这个怎么设置自己的七牛账号?
    lizheming
        12
    lizheming  
    OP
       2015-09-21 09:37:52 +08:00
    @cai314494687 这个也很棒诶!比我这个好多了~ 收藏之!
    其实设置账号是个彩蛋,不过估计没多少人会去发现 OwQ 我只能说开控制台有惊喜哦~
    lizheming
        13
    lizheming  
    OP
       2015-09-21 09:40:01 +08:00
    @mutoulbj 哈哈哈哈,代码还很烂,还需要后续的整理呢,谢谢支持~
    mutoulbj
        14
    mutoulbj  
       2015-09-21 09:44:48 +08:00
    @lizheming 看到蛋了~哈哈哈
    geew
        15
    geew  
       2015-09-21 10:02:41 +08:00
    @lizheming 看了七牛的文档 前端直接上传貌似都要把 key 写到页面上的吧
    shakoon
        16
    shakoon  
       2015-09-21 10:53:24 +08:00
    good ,以后往 v2 发图片可以用,谢谢
    lizheming
        17
    lizheming  
    OP
       2015-09-21 11:13:14 +08:00
    @geew 我因为 key 的问题把上传放到了后端做了 OwQ... 本来纯前端像 1 楼的链接就是很好的 T_T
    thinkmore
        18
    thinkmore  
       2015-09-21 12:00:55 +08:00
    @lizheming 能否告知一下实现原理呢?自己也想要撸一个来玩,有什么好的借鉴代码吗?
    tyhunter
        19
    tyhunter  
       2015-09-21 12:09:57 +08:00
    相比之下还是微博良心啊,三年前传到微博图床的图片现在还能打开
    lizheming
        20
    lizheming  
    OP
       2015-09-21 12:19:52 +08:00
    @thinkmore 后端上传就是调用了七牛的 SDK 做上传,你可以自己写也可以直接调我的接口。前端文件获取的话代码可以直接参考我的就好了,写的还比较清楚。

    @tyhunter 是呀... 只怪自己当初选型没选好 T_T
    x4
        21
    x4  
       2015-09-21 13:45:00 +08:00 via Android
    @lizheming 直接放前端
    x4
        22
    x4  
       2015-09-21 13:49:31 +08:00 via Android
    等开源
    yanwen
        23
    yanwen  
       2015-09-21 14:06:10 +08:00
    好犀利。。等开源学习学习。。
    lizheming
        24
    lizheming  
    OP
       2015-09-21 14:56:12 +08:00
    @x4 直接放前端有暴露 key 的问题,比较纠结啊,拿到 key 之后就可以对空间内的资源文件做任意操作了,感觉不太好的样子...
    lizheming
        25
    lizheming  
    OP
       2015-09-21 14:56:56 +08:00
    @yanwen 好的,最近收拾一下放出来 T_T
    irainsoft
        26
    irainsoft  
       2015-09-21 21:53:31 +08:00
    赞一个
    wzxjohn
        27
    wzxjohn  
       2015-09-21 22:50:32 +08:00
    @Strikeactor 这位老兄的源码有点老了,改了一下使用了最新的 SDK ,这两天整理了传一下。要是有前端能把页面也整一下就好了。。。
    wzxjohn
        28
    wzxjohn  
       2015-09-21 22:51:15 +08:00
    @lizheming 如果能把 api.php 开源跑在自己的服务器上就好了。不过似乎也不难写=。=
    lizheming
        29
    lizheming  
    OP
       2015-09-21 22:56:08 +08:00
    @wzxjohn 哈哈,直接用 dropzone 这个插件的样式就好了吧,我看它也是用的这。另外请问你知道如何直接上传之后返回 download_url 么?我还挺好奇,都是同一个接口不知道它的为啥就能直接返回 download_url ....
    lizheming
        30
    lizheming  
    OP
       2015-09-21 22:57:13 +08:00
    @wzxjohn 嗯,是的,之后一并发出来,毕竟调用别人的接口代价是最昂贵的 T_T
    justjavac
        31
    justjavac  
       2015-09-22 09:36:15 +08:00
    哈哈, console 输入 help

    > help
    欢迎使用花式传图工具,下面是一些支持的命令:
    ls 显示当前配置
    rm 清空配置文件
    clear 清空控制台
    help 显示帮助
    accessKey 查看 accessKey 值,设置请赋值
    secretKey 查看 secretKey 值,设置请赋值
    bucketUrl 查看 bucketUrl 值,设置请赋值
    bucket 查看 bucket 值,设置请赋值
    wzxjohn
        33
    wzxjohn  
       2015-09-22 10:31:01 +08:00
    @lizheming 如果我没理解错的话过程是这样的,页面提交到七牛,提交成功后七牛会调一个 callback ,然后把 callback 的内容作为返回直接返回给网页,所以网页就拿到直接的 download url 了。其实这个 url 也是后台拼接之后返回的,并不是七牛直接给的,因为七牛也不知道你的域名是什么。
    本来准备试一下截图给你看请求的,但是结果七牛挂了。。。真是不争气啊。。。
    wzxjohn
        34
    wzxjohn  
       2015-09-22 10:32:10 +08:00
    @lizheming 顺便你的 favicon.ico 是 403 是闹哪样。。。
    wzxjohn
        35
    wzxjohn  
       2015-09-22 10:33:10 +08:00
    lizheming
        36
    lizheming  
    OP
       2015-09-22 10:49:43 +08:00
    @wzxjohn 不不不... 你可以看作者的是纯前端的,根本没调用后台的数据,直接是七牛的接口返回的,不信的话你可以看看。我也想截图给你看请求的.... 但是....挖掘机实在太强大了……

    ico 的问题应该是服务器的问题,过会儿看看...
    lizheming
        37
    lizheming  
    OP
       2015-09-22 11:22:41 +08:00
    wzxjohn
        38
    wzxjohn  
       2015-09-22 11:36:34 +08:00   ❤️ 1
    @lizheming 是的,就是前端的,这个返回是七牛调用了你的 callback url 之后把你返回的内容透传给你的,也就是说这个返回是可以自定义的,并不是七牛固定好的。
    lizheming
        39
    lizheming  
    OP
       2015-09-22 12:05:24 +08:00
    @wzxjohn 这个 callback_url 在哪里设置的?前端他没做设置,七牛那边我也没找到设置的地方
    wzxjohn
        40
    wzxjohn  
       2015-09-22 14:11:37 +08:00   ❤️ 1
    @lizheming 后端在请求上传 Token 的时候设置的。去看后端代码。
    lizheming
        41
    lizheming  
    OP
       2015-09-22 14:51:09 +08:00
    @wzxjohn ..... 它这个没有后端啊.... 直接请求到了 http://up.qiniu.com 上了... =_=! ...
    wzxjohn
        42
    wzxjohn  
       2015-09-22 17:32:44 +08:00   ❤️ 1
    @lizheming 有的哦。。。去仔细看代码。。。这是个 Python 的后端哦。。。不然你以为真的把 Token
    写前端啊。。。
    lizheming
        43
    lizheming  
    OP
       2015-09-22 17:55:47 +08:00
    @wzxjohn 好吧,的确是有后端的, token 的值每次刷新都会变,之前没注意到,抱歉。不过我还是不明白,你没有传 callback_url 给 qiniu , qiniu 是如何知道上传成功后要回调到某个地址然后再给出结果的。
    wzxjohn
        44
    wzxjohn  
       2015-09-22 20:47:47 +08:00   ❤️ 1
    @lizheming 传了的,那个 Token 里面其实啥都有。。。去看看七牛的上传 Token 生成文档吧~理论上如果我把 Token 的失效设置个十年百年那前端就完全可以跟后端分离了。
    lizheming
        45
    lizheming  
    OP
       2015-09-22 22:30:39 +08:00
    @wzxjohn 看到了,七牛的几个上传策略上传凭证上传 xx 完全傻傻分不清楚.... 是我之前没有仔细看文档,抱歉 && 谢谢指导。
    wzxjohn
        46
    wzxjohn  
       2015-09-22 23:39:12 +08:00
    @lizheming 看懂了就好~~~ doora 的代码我给更新了一下,你可以参考一下哈哈~
    https://github.com/wzxjohn/doora
    lizheming
        47
    lizheming  
    OP
       2015-09-23 00:08:32 +08:00
    @wzxjohn 好的 ~~~
    6IbA2bj5ip3tK49j
        48
    6IbA2bj5ip3tK49j  
       2015-09-23 00:15:43 +08:00
    火狐输入 help 会跳到控制台的帮助去。
    lizheming
        49
    lizheming  
    OP
       2015-09-23 00:21:51 +08:00
    @xgfan 忘了说菜单 Chrome ONLY 了 T_T
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2432 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:45 · PVG 23:45 · LAX 07:45 · JFK 10:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.