把云服务器作为代码仓库 云服务器制作
Unicloud 阿里云服务器作图床
uniCloud提供免费10G云存储空间,不限流量,底层是阿里云OSS,因此速度非常快
这个源码是利用uniCloud云存储开发的一款图床源码。和网上其他的uniCloud图床源码不一样的是,所有与uniCloud接口交互的部分都由后端php实现,前端只与阿里云OSS交互,不再需要引用uniCloud的vue框架js。
使用说明:
第一步,首先注册一个账号,有账号的可以跳过这一步;
第二步,登录后台,创建一个应用,然后手动将服务空间里的 spaceId 和 clientSecret 配置到本源码的 config.php;
第三步,后面访问首页即可测试。
源码里面已配置好,建议使用自己的spaceId和clientSecret
注意:上传非图片文件需要在后台—云存储上传。
下面是自己制作api接口的过程:
注:所有想法均为原创,因本人大一技术有限,方法可能比较笨拙,欢迎大佬指出优化。
unicloud上传图片界面:
点击文件详情弹出带有图片url的弹窗
复制url保存到img.txt文件中,然后通过一个php文件获取随机数组然后json返回。
<?php //存有美图链接的文件名img.txt $filename = "img.txt"; if(!file_exists($filename)){ die('文件不存在'); } //从文本获取链接 $pics = []; $fs = fopen($filename, "r"); while(!feof($fs)){ $line=trim(fgets($fs)); if($line!=''){ array_push($pics, $line); } } //从数组随机获取链接 $pic = $pics[array_rand($pics)]; //返回指定格式 $type=$_GET['type']; switch($type){ //JSON返回 case 'json': header('Content-type:text/json'); die(json_encode(['pic'=>$pic])); default: die(header("Location: $pic")); } ?>但是有大量图片处理时,一个一个复制粘贴属实麻烦。
我第一个想到的是爬虫。
尝试了几次就放弃了(爬虫怕的好,lao饭吃到饱)
第二次尝试使用抓包工具BrupSuite
不出意外又失败了。。。。开启BrupSuite代理后unicloud登录界面直接进不去,登陆不上也无法返回数据
code=400.。。
第三次就是看上传界面的源码找到灵感。
图片上传之后会出现四个复制框分别是url,html,markdown,bbcode四种格式。查看index.php
function(res){ layer.closeAll(); $.ajax({ type : "POST", url : "api.php?act=complete_upload", data : {id: predata.id}, dataType : 'json', success : function(data) { layer.closeAll(); if(data.code == 0){ var imgurl = 'https://' + predata.cdnDomain + '/' + predata.ossPath; $("#img-thumb a").attr('href',imgurl); $("#img-thumb img").attr('src',imgurl); $("#url").val(imgurl); $("#html").val("<img src='" + imgurl + "'/>"); $("#markdown").val(""); $("#bbcode").val("[img]" + imgurl + "[/img]"); $("#imgshow").show(); $("input[name=file]").val(''找到返回的imgurl参数,决定将imgurl值直接以txt文件自动下载从而避免自己复制粘贴,后面再写一个bat将txt文件合并。
urlimg导出为txt文件:
var data = imgurl; var name = 'cdk.txt';//文件名 this.exportRaw(data, name); exportRaw (data, name) { var urlObject = window.URL || window.webkitURL || window; var export_blob = new Blob([data]); var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a") save_link.href = urlObject.createObjectURL(export_blob); save_link.download = name; save_link.click(); },实现效果:
bat实现多个txt文件合并:
1.将下载的txt文件放到一个新建的文件夹中;
2.编写bat文件
新建txt文件,写入下面代码,并改为bat文件
for %%a in (*.txt) do ( more %%a >>all ) ren all all.txt //返回到all。txt文件
批处理文件bat实现多个txt文件合并和换行合并。(因为每个txt文件均为一行url,所以进行换行处理)
注意:
type *.txt >> xxx.txt
此bat不能实现自动换行。
此后只需点击bat文件即可实现合并。
此bat文件小文件能用但是处理大文件就卡住。
1. @echo off & cd /d "%~dp0" 2. echo.添加换行符 3. for %%i in (*.txt) do ( 4. • echo %%i 5. • echo.>>"%%i" 6. ) 7. echo ----------------------- 8. echo.合并文件 9. copy /b *.txt data 10. echo ----------------------- 11. move /y "data" "data.txt" 12. pause&exit第一个换行是紧接上一个文本内容,这个会多换一行,而且同一个文件里面多次测试会叠加换行符。
后续想法:
完善前端把imgurl post到后端
编写一个后端,获取前端imgurl直接存入数据库,将url.txt全部存入数据库
编写一个接口从后端返回数据。