项目描述:项目前台是Html,后台是flask
功能描述:新增用户模块有上传头像的功能,点击上传,提交form表单到后台路由函数,进行处理,在登录的时候查询数据库并返回到前台指定的头像位置。
图片展示:
用户登录:
思路描述:前台:提交form表单,action写明要跳转的后台路由名称,写明跳转的方法,以及只有使用了enctype=multipart/form-data,才能完整的传递文件数据。
写明文件类型file name属性(方便后台获取)ps:给每个输入框加上name方便在后台获取表单数据 accept指的是:可接受的图片格式
后台:找到对应路由,在函数里面 获取到表单数据 注意:图片用到了request.files['name属性'],然后将图片保存到在项目里面新建的一个upload文件夹,需要写上这句话
# 默认的路径 上传图片暂存的文件夹
app.config['UPLOAD_FOLDER'] = 'upload/'
然后组装路径 存到数据库
最后一行return img_stream(name2) 是调用的函数
函数如下:
"""
这是一个展示Flask如何读取服务器本地图片, 并返回图片流给前端显示的例子
"""
def return_img_stream(img_local_path):
"""
工具函数:
获取本地图片流
:param img_local_path:文件单张图片的本地绝对路径
:return: 图片流
"""
import base64
img_stream = ''
with open(img_local_path, 'rb') as img_f:
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream).decode()
return img_stream
到现在为止,接近尾声,在前台只需要用
<img style="width:40px;height:40px; border-radius:50%; " src="data:;base64,{{ img_stream }}"> 的方式获取即可。