七牛图床之花式传图

[lizheming]

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

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

关于自己设置账号其实算是个彩蛋的 T_T
不过看起来似乎没人发现呢
那就给个提醒大家开一下控制台吧 T_T

[Strikeactor]

赞，平时给别人临时分享文件都是用的这位老兄的
http://lab.wong2.me/doora/

感谢你们

[lizheming]

@Strikeactor 这个好棒！！收藏了！不过这位大大把 key 写在页面里这样似乎不大好诶....

[pmpio]


[pmpio]


[pmpio]

@Strikeactor 这个图床在 V2EX 用不了。。。。

[wzxjohn]

@pmpio 回帖默认不支持 MarkDown 。。。

[pmpio]


[pmpio]

@wzxjohn 晕，原来如此！！！

[cai314494687]

http://7xlrn8.com1.z0.glb.clouddn.com/018f61399c52ab7e81ac89e20cd70ae1.jpg 测试

[mutoulbj]

点错传了个大文件，页面崩溃了。。。

[cai314494687]

跟这个类似 http://yotuku.cn/


你这个怎么设置自己的七牛账号？

[lizheming]

@cai314494687 这个也很棒诶！比我这个好多了~ 收藏之！
其实设置账号是个彩蛋，不过估计没多少人会去发现 OwQ 我只能说开控制台有惊喜哦~

[lizheming]

@mutoulbj 哈哈哈哈，代码还很烂，还需要后续的整理呢，谢谢支持~

[mutoulbj]

@lizheming 看到蛋了~哈哈哈

[geew]

@lizheming 看了七牛的文档 前端直接上传貌似都要把 key 写到页面上的吧

[shakoon]

good ，以后往 v2 发图片可以用，谢谢

[lizheming]

@geew 我因为 key 的问题把上传放到了后端做了 OwQ... 本来纯前端像 1 楼的链接就是很好的 T_T

[thinkmore]

@lizheming 能否告知一下实现原理呢？自己也想要撸一个来玩，有什么好的借鉴代码吗？

[tyhunter]

相比之下还是微博良心啊，三年前传到微博图床的图片现在还能打开

[lizheming]

@thinkmore 后端上传就是调用了七牛的 SDK 做上传，你可以自己写也可以直接调我的接口。前端文件获取的话代码可以直接参考我的就好了，写的还比较清楚。

@tyhunter 是呀... 只怪自己当初选型没选好 T_T

[x4]

@lizheming 直接放前端

[x4]

等开源

[yanwen]

好犀利。。等开源学习学习。。

[lizheming]

@x4 直接放前端有暴露 key 的问题，比较纠结啊，拿到 key 之后就可以对空间内的资源文件做任意操作了，感觉不太好的样子...

[lizheming]

@yanwen 好的，最近收拾一下放出来 T_T

[irainsoft]

赞一个

[wzxjohn]

@Strikeactor 这位老兄的源码有点老了，改了一下使用了最新的 SDK ，这两天整理了传一下。要是有前端能把页面也整一下就好了。。。

[wzxjohn]

@lizheming 如果能把 api.php 开源跑在自己的服务器上就好了。不过似乎也不难写=。=

[lizheming]

@wzxjohn 哈哈，直接用 dropzone 这个插件的样式就好了吧，我看它也是用的这。另外请问你知道如何直接上传之后返回 download_url 么？我还挺好奇，都是同一个接口不知道它的为啥就能直接返回 download_url ....

[lizheming]

@wzxjohn 嗯，是的，之后一并发出来，毕竟调用别人的接口代价是最昂贵的 T_T

[justjavac]

哈哈， console 输入 help

> help
欢迎使用花式传图工具，下面是一些支持的命令：
ls 显示当前配置
rm 清空配置文件
clear 清空控制台
help 显示帮助
accessKey 查看 accessKey 值，设置请赋值
secretKey 查看 secretKey 值，设置请赋值
bucketUrl 查看 bucketUrl 值，设置请赋值
bucket 查看 bucket 值，设置请赋值

[iniwap]

http://7xlrn8.com1.z0.glb.clouddn.com/d076c74cbfb3044125e2780475a62375.png

[wzxjohn]

@lizheming 如果我没理解错的话过程是这样的，页面提交到七牛，提交成功后七牛会调一个 callback ，然后把 callback 的内容作为返回直接返回给网页，所以网页就拿到直接的 download url 了。其实这个 url 也是后台拼接之后返回的，并不是七牛直接给的，因为七牛也不知道你的域名是什么。
本来准备试一下截图给你看请求的，但是结果七牛挂了。。。真是不争气啊。。。

[wzxjohn]

@lizheming 顺便你的 favicon.ico 是 403 是闹哪样。。。

[wzxjohn]

@lizheming http://www.weibo.com/2651079901/CBGClzgKv
都是挖掘机的锅=。=

[lizheming]

@wzxjohn 不不不... 你可以看作者的是纯前端的，根本没调用后台的数据，直接是七牛的接口返回的，不信的话你可以看看。我也想截图给你看请求的.... 但是....挖掘机实在太强大了……

ico 的问题应该是服务器的问题，过会儿看看...

[lizheming]

@wzxjohn 补图 http://doora.qiniudn.com/CR98R.png

[wzxjohn]

@lizheming 是的，就是前端的，这个返回是七牛调用了你的 callback url 之后把你返回的内容透传给你的，也就是说这个返回是可以自定义的，并不是七牛固定好的。

[lizheming]

@wzxjohn 这个 callback_url 在哪里设置的？前端他没做设置，七牛那边我也没找到设置的地方

[wzxjohn]

@lizheming 后端在请求上传 Token 的时候设置的。去看后端代码。

[lizheming]

@wzxjohn ..... 它这个没有后端啊.... 直接请求到了 http://up.qiniu.com 上了... =_=! ...

[wzxjohn]

@lizheming 有的哦。。。去仔细看代码。。。这是个 Python 的后端哦。。。不然你以为真的把 Token
写前端啊。。。

[lizheming]

@wzxjohn 好吧，的确是有后端的， token 的值每次刷新都会变，之前没注意到，抱歉。不过我还是不明白，你没有传 callback_url 给 qiniu ， qiniu 是如何知道上传成功后要回调到某个地址然后再给出结果的。

[wzxjohn]

@lizheming 传了的，那个 Token 里面其实啥都有。。。去看看七牛的上传 Token 生成文档吧~理论上如果我把 Token 的失效设置个十年百年那前端就完全可以跟后端分离了。

[lizheming]

@wzxjohn 看到了，七牛的几个上传策略上传凭证上传 xx 完全傻傻分不清楚.... 是我之前没有仔细看文档，抱歉 && 谢谢指导。

[wzxjohn]

@lizheming 看懂了就好~~~ doora 的代码我给更新了一下，你可以参考一下哈哈~
https://github.com/wzxjohn/doora

[lizheming]

@wzxjohn 好的 ~~~

[6IbA2bj5ip3tK49j]

火狐输入 help 会跳到控制台的帮助去。

[lizheming]

@xgfan 忘了说菜单 Chrome ONLY 了 T_T

[zaqxsw123nm]

http://7xlrn8.com1.z0.glb.clouddn.com/0e9ad4494995212bbf8cbf7c3309c1eb.jpg