前言
又是被要求改需求的一天,原本logo时一张图片,而且有百边确实比较丑爆了,然后我就改了改,成了下面的模样。这个power by的logo乍一看还是不错的哈
图片上传与存储
为了有一张贴合背景的图片,矢量化还是有必要的,新手直接推荐在线处理,如:搞定抠图、创客贴在线抠图
PS:我可不是上述软件的既得利益者,说不定哪天就收费了,如您有合适的,还请分享。
1.上传
这是Home页的两个logo其中右边的这个时可更改的,当鼠标放在该logo上时,会出现图片选择栏
<div class="row clearfix col-md-12 column" style="display: inline-flex;">
<img style="height: 100px;clear:right;float: left;" src="../static/images/CETC.jpeg"><br>
{% if avatar_path %}
<img id="avatar" class="clear:right;float: left;" height="100px" src="{{ url_for('static',filename='uploads/'+avatar_path) }}">
{%else%}
<img id="avatar" style="height: 100px;clear:right;float: left;" src="../static/images/seu.png">
{% endif %}
</div>
<form style="display: none;" class="avatar-input-form" method="POST" enctype="multipart/form-data">
<input name="avatar_upload" type="file" class="file" data-show-preview="false"/>
</form>
这儿我遇到了个神奇的问题,由于对美工的不了解。
style="display: inline-flex;"
要放在外面,内部的两个图片才能对齐。- logo的尺寸不受控制,放在style中不太好使,然后单独的height="100px"方可,还请大佬不吝指教。
<script>
$(document).ready(function(){
$(".file-caption-main").css({"width": "380px"}) //固定选择栏长度
$("#avatar").mouseenter(function(){ //鼠标进入logo则显示选择栏
$(".avatar-input-form").css({"display": ""})
});
$("#avatar").change(function(){ //图片上传成功隐藏
$(".avatar-input-form").css({"display": "none"})
});
});
</script>
你可能会好奇这个样式,看着还是很不错的,同时你会发现,这个表单提交没有submit,主要由于两个外部脚本决定的
<link rel="stylesheet" href="{{ url_for('static', filename='css/fileinput.min.css') }}">
<script src="{{ url_for('static', filename='js/fileinput.min.js') }}"></script>
这两个脚本被我下载到本地了,要不每次都得从外部服务器加载有点小慢。当然你仍然这么干,link
点击Brower选择图片,诶出现了两个控件,真不错(都是上面两个脚本的功劳
2.存储
点击上传至后端:这是一个用python搭的flask应用,注意当前页时在站点目录 / 下哦,借助post表单提交,将图片给保存在服务器上。同时为了让重启后回复之前的更改,将更改后的logo地址(此处是文件名,因为我们知道保存在哪个目录)保存在数据库中。
# seu 东大logo更改
avatar_path = AvatarTable().getFirstPath() # 从数据库中获取logo路径
@app.route('/', methods=['POST'])
def avatar():
if request.method == 'POST':
file = request.files['avatar_upload'] # avatar_upload 这个是前端form表单input标签的对应name
base_path = app.config['UPLOAD_FOLDER']
file_path = os.path.join(base_path, filename)
file.save(file_path) //将logo保存在指定目录下
AvatarTable().update(filename) //更新数据库的logo地址
global avatar_path
avatar_path = filename //更新全局的logo地址
return render_template("index.html",avatar_path=avatar_path) //重新渲染,显示上传后的logo
这个用于存储的表单表现的就太过于纯粹了,就一个字段哈哈(id不算),之后结合用户登录的话,自行扩增类就好。
from flask_sqlalchemy import SQLAlchemy
import pymysql
class AvatarTable(db.Model):
__tablename__ = 'AvatarInfo'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
avatar_path = db.Column(db.String(55))
def __init__(self, imgPath="images/seu.png"):
self.avatar_path = imgPath
def save(self):
db.session.add(self)
db.session.commit()
def update(self,imgPath): //更新(暂时只更新第一个
# db.session.query(AvatarTable).filter(AvatarTable.id==1).update({"avatar_path":imgPath})
AvatarTable.query.filter(AvatarTable.id==1).update({"avatar_path":imgPath})
db.session.commit()
def getFirstPath(self): //获取第一个地址作为logo地址
ret = AvatarTable.query.filter(AvatarTable.id==1).first()
return ret.avatar_path
细细发现,你其实可以偷懒,不用操作数据库,将所有的文件保存到同一个路径就好,但是吧为了之后方便多用户扩展,还是利用数据库存储把。具体的数据库连接啥的我就不细说了,参照博客link
3.联动显示
其实也就是显示哈哈哈,只不过在多个地方显示而已,此处的目的是为了多看几张好看的图片
PS:这是来自AI辅助的半自动标注的项目(检测分类、文字识别)Web历程节选,已完事。