Y20
以下只介绍上传功能的实现，具体配置不再多介绍。若需要具体实现的文件并运行，可下载文章尾部源代码。
后端代码（.py）
from flask import render_template, url_for, request
from werkzeug.utils import secure_filename
import os,json
#定义函数完成文件上传页面的显示
def show_load_file():
return render_template('upload.html', url = urls('upload_file'), js_path = urls('static',filename='js/jquery.min.js'), img_path = urls('static',filename='img'))
# 定义函数完成文件上传操作
BASE_DIR = os.path.dirname(__file__)
def upload_file():
if request.method == 'POST':
mkdir_file(os.path.join(BASE_DIR, 'file/img/xiao'))
#获取前端传输的文件(对象)
f = request.files.get('file')
# save：flask中文件对象的方法，作用是将对应的文件对象从缓存区域存储到指定的硬盘区域
filename = secure_filename(f.filename)
# 验证文件格式是否合法（简单设定几个格式）
types = ['jpg','png','gif']
if filename.split('.')[-1] in types:
f.save(os.path.join(BASE_DIR, 'file/img/xiao/xiao_{0}'.format(filename)))
return json.dumps({'code':200,'url':url_for('download_file', filename='xiao_{0}'.format(filename), _external=True)})
else:
return json.dumps({'error':'文件格式不合法','code':400})
else:
return json.dumps({'code':405,'error':'请求方式不正确'})
# 定义函数完成图片的读取操作
def download_file(filename):
path = os.path.join(BASE_DIR, 'file/img/{0}/{1}'.format(filename.split('_')[0], filename))
if os.path.exists(path):
f = open(path, 'rb+')
data = f.read()
f.close()
return data
else:
return '404'
# 定义函数完成文件或文件夹的创建
def mkdir_file(dir_name):
if not os.path.exists(dir_name):
os.makedirs(dir_name, 755)
else:
for filename in os.listdir(dir_name):
if os.path.isfile(os.path.join(dir_name, filename)):
os.remove(os.path.join(dir_name, filename))
# 定义函数获取指定内容的路径
# "*"之后的会被设定为命名关键字参数,参数名不可变
def urls(fun_name, *, filename=None, external=True):
return url_for(fun_name, filename=filename, _external=external)
前端代码（.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
form {
width: 500px;
border: 1px solid rgba(0,0,0,0.7);
box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
border-radius: 10px;
margin: 100px auto;
}
form>div {
margin: 15px 0;
padding: 0 50px;
}
input[type='text']{
width: 300px;
height: 30px;
}
input[type='radio'] {
margin: 0 10px;
}
input[type='submit'],input[type='button']{
width: 100px;
height: 30px;
border: 1px solid rgba(0,0,0,0.5);
color: white;
background: rgba(0,0,0,0.7);
border-radius: 5px;
}
form>div:last-child{
text-align: right;
}
#photo {
width: 70px;
height: 70px;
border-radius: 50%;
vertical-align: middle;
margin-left: 20px;
}
#file {
display: none;
}
</style>
</head>
<body>
<!--在文件上传时form表单的数据传输方式必须为post，并且编码格式必须为multipart/form-data，否则服务器端是无法获取传输的文件数据-->
<form method="post" enctype="multipart/form-data">
<div>
头像:
<label for="file">
<img src="{{img_path}}/photo.jpg" alt="" id="photo">
</label>
<input type="file" id="file" name="file">
</div>
<div>
昵称: <input type="text" name="nickname">
</div>
<div>
性别: <input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</div>
<div>
年龄: <input type="text" name="age">
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
</body>
<script type="text/javascript" src="{{js_path}}"></script>
<script type="text/javascript">
$('#file').on('change',function () {
// 获取file标签选择器的文件
let file_obj = $('#file').get(0).files[0];
// 将文件对象打包成form表单类型的数据
let formdata = new FormData;
formdata.append('file',file_obj);
// 进行文件数据的上传
$.ajax({
url:'{{url}}',
type:'post',
data:formdata,
processData:false,
contentType:false,
success:function (res) {
//对数据json解析
let data = JSON.parse(res);
if (data.code == 200){
$('img').attr('src',data.url)
}else {
alert(data.error)
}
}
});
});
</script>
</html>
源代码链接（flask2文件夹）：https://pan.baidu.com/s/10_vZeB9cB-ZiftsVhie3NQ 提取码：33nq
个人小结，定有不足，欢迎指点。
谢谢~