前言

之前搭了个BBS作为自己的便签记事本, 包括博客同样也是使用Markdown语法, 为了加快博客图片类媒体载入速度, 所以想着自己搭个图床, 想要那种简简单单web界面上传的, 无需过多功能的图床，逛了圈Github并没有发现比较合适的项目, 于是乎自己就造了个微后端转发图片到腾讯的Cos上, 顺带加上一些图片压缩功能。

架构

Web界面由Flask 渲染出, Web请求图片到后端, 后端保存一份数据并且转发到Cos上, 上传完成后再将url传回前端Web。

前端Web页面

由于本人并不在行前端开发,所以直接拿了CodingNepal的模板稍微改造了下XD
~~后面会填之前挖的坑, 届时在系统学习亿下~~

但是这里遇到了一个问题, 后端已经传回URL参数了,但是如果直接透过Ajax的responseText并无法直接获取信息,经过多次尝试后发现需要进行两次判断，确认接收成功后才能拿到数据, 踩了个没仔细看文档的坑......

其中.readyState的 4 是 DONE 代表操作已完成。

if(xhr.readyState==4){     // 操作已完成判断
    if(xhr.status==200){   // 200 ok http响应码
        xhr.responseText   // 可以获取到值
    }
}

Flask微后端

后端用 Flask 实现, 就是简简单单转发前端发来图片到Cos上,当然再加点纠错, 统一名称还有保存备份等功能；

统一名称

def rename(self,filename):
    """
    修改名称,前六位为文件名,后面为当前时间的缩写,并且会加上文件后缀
    例如 101297909_p0.jpg  => 101297_221024235918.jpg
    """
    suffix = ''
    for i in range(1,len(filename)):
        suffix+=filename[-i] 
        if filename[-i] == '.':
            suffix = suffix[::-1] 
            now_time_format = time.strftime('%y%m%d%H%M%S',time.localtime())
            new_name = filename[:6]+'_'+now_time_format+suffix
            return new_name
        return False  # 没有后缀返回

备份图片

def file_save_path(self,filename):
    """
    通过输入名称返回存放在服务器文件夹的地址
    根据时间放在对应文件夹上,仅精确到年和月
    """
    if filename:
        nowyear,nowmon = time.strftime('%Y',time.localtime(time.time())),time.strftime('%m',time.localtime(time.time()))
        if not (os.path.exists('upload_save')):
            os.makedirs('upload_save') 
        if not (os.path.exists('upload_save/' + str(nowyear))):  #是否存在当年的文件夹
            os.makedirs('upload_save/' + str(nowyear))
        if not (os.path.exists('upload_save/' + str(nowyear) + '/' + str(nowmon))): #是否存在当月的文件夹
            os.makedirs('upload_save/' + str(nowyear) + '/' + str(nowmon))
            
        self.filepath =  f'upload_save/' + nowyear + '/' + nowmon +'/' + filename
        return self.filepath
    else:
        return False

上传至Cos

这里上传的话,我是直接使用到官网提供的SDK,当然走https协议的api也是可以, 使用前得去创建对象桶和申请密钥操作;

用Flask的话, 直接下载对应SDK包即可,推荐使用最新的XML Python SDK。

Cos对象存储

那么图床就得要有存储的介质,为了加快响应,就直接使用Cos对象存储,个人用的话数据量不大一个月也就几毛钱,而且访问速度还不错,相对于比直接丢在服务器上配置CDN访问快点。

我使用的是腾讯云的Cos, 其他云提供商也有一样的产品,比如阿里云的OSS,华为OBS,Amzn的EBS等

根据Cos对象存储文档开通好后，并且根据地理位置新建好存储桶,配置完秘钥,就可以直接使用SDK封装在后端了。

图片处理

正常情况下我们希望图片能够快速访问成功, 但是一些图片过大的话会非常不便于传输,特别是访问网页的时候, 框架都已经加载完毕了, 但是图片仍在loading... 体验不佳, 所以这个时候就得考虑舍弃质量换取空间加快响应, 进行图片压缩。

一般这个步骤是在上传至服务器之前在前端完成, 亦或者由后端处理好后再传到Cos上, 不过腾讯云上有个数据万象可以直接对Cos对象存储上的数据进行处理, 这样就无需我们进行图片处理,而且还能保存一份没有压缩的源图片在Cos,又可以提供经过压缩后的图片数据。

目前是每月免费额度为10TB流量,对于个人图床四舍五入就是免费

压缩配置
推荐使用相对质量, 值在70以上。

通过简单配置后, 就可以在原本Cos对象地址加上设置好的规则后缀, 进行访问压缩后的数据, 去除后缀即可访问源数据。

源地址和压缩地址

https//cos.xxx.com/xxx.jpg  //源数据
https//cos.xxx.com/xxx.jpg_compress  //压缩后的数据数据

一些问题

由于需要把图片上传至服务器后才能转发到Cos, 服务器转发到Cos不用担心,毕竟都在一个内网, 但是这一段上传至服务器的流量数据, 因为服务器的带宽水管很小, 所以导致在上传大文件的时候耗时久蛋疼......

直接使用万象数据的话, 又相当于Cos上的数据一直都是保存源数据的, 日积月累的话会变得很庞大, 但是个人图床其实不太用担心这类问题, 公共图床的话还是在上传的时候进行下数据压缩。

视频床?

想实现可以上传视频的, 但是奈何带宽太小的, 体验不好~~大概就是百度网盘的体验？~~,还不如直接本地调用SDK或者直接登录控制台上传视频XD

EPicture个人图床搭建

前言

架构