flask POST请求，数据入库，文件上传，一文看懂，3天掌握Flask开发项目系列博客之三_flask post到的数据存mysql-程序员宅基地
技术标签： python 精彩技术文 前端 后端 flask 文件上传
flask 实现ajax 数据入库
在正式编写前需要了解一下如何在 python 函数中去判断，一个请求是 get 还是 post。
python 文件代码如此所示：
# route()方法用于设定路由；
@app.route('/hello.html', methods=['GET', 'POST'])
def hello_world():
if request.method == 'GET':
# args = request.args
return render_template('hello.html')
if request.method == "POST":
print("POST请求")
上述代码通过 requests.method 属性判断当前请求类型，然后实现相应的逻辑。
注意上述内容中的 @app.route('/hello.html', methods=['GET', 'POST']) ，绑定的方法由参数 methods 决定。
HTML 页面代码如下所示：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>这是第一个HTML页面</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
{
{name}}
<input type="button" value="点击发送请求" id="btn" />
<script>
$(function() {
$('#btn').on('click', function() {
alert($(this).val());
});
})
</script>
</body>
</html>
在 HTML 页面中提前导入 jquery 的 CDN 配置，便于后续实现模拟请求操作。
再次完善一些 POST 请求的相关参数判断，通过 requests.form 获取表单参数。
# route()方法用于设定路由；
@app.route('/hello.html', methods=['GET', 'POST'])
def hello_world():
if request.method == 'GET':
args = request.args
name = args.get('name')
return render_template('hello.html',name=name)
if request.method == "POST":
print("POST请求")
arges = request.form
print(arges)
return "PPP"
同步修改一下前端请求部分，这里改造主要需要的是前端知识。
<body>
{
{name}}
<input type="button" value="点击发送请求" id="btn" />
<script>
$(function() {
$('#btn').on('click', function() {
//alert($(this).val());
$.post('./hello.html', function(result) {
console.log(result);
})
});
})
</script>
</body>
测试的时候同步开启浏览器的开发者工具，并且切换到网络请求视图，查看请求与返回数据。
数据传递到后台之后，只需要使用上一篇博客涉及的内容即可将数据存储到 MySQL 中。
实现文件上传
了解了POST请求之后，就可以通过该模式实现文件上传操作了。
优先修改 HTML 页面，实现一个文件选择按钮。
<input type="file" id="file" />
<script type="text/javascript">
$(function() {
$('#btn').on('click', function() {
//alert($(this).val());
$.post('./hello.html', function(result) {
console.log(result);
})
});
var get_file = document.getElementById("file");
get_file.onchange = function(e) {
file = e.currentTarget.files[0]; //所有文件，返回一个数组
var form_data = new FormData();
form_data.append("file", file);
console.log(form_data);
form_data.append("file_name", e.currentTarget.files[0].name);
$.ajax({
url: '/upload',
type: 'post',
data: form_data,
contentType: false,
processData: false,
success: function(res) {
console.log(res.data);
}
});
}
})
</script>
服务端处理文件的代码如下所示
@app.route('/upload', methods=['POST'], strict_slashes=False)
def upload():
if request.method == "POST":
print("POST请求")
file = request.files.get('file')
name = request.form.get('file_name')
print(name)
file.save("./"+name)
# print(name)
return "PPP"
这里需要注意的是如果 Python 端存在BUG，前端的AJAX请求会出现 400或者500错误。
文件名通过前端传递 file_name 参数获取。
本案例可以扩展上传成功之后，返回JSON数据到前端进行后续处理。
项目在实测的过程中发现一个问题，在读取前台传递的文件流时，需要使用 request.files.get() 方法实现，而不能用 request.form['参数名'] 。
记录时间
2022年度 Flag，写作的 574 / 1024 篇。
可以关注我，点赞我、评论我、收藏我啦。
更多精彩
智能推荐
BCrypt密码加密的简单使用_bcrypt加密-程序员宅基地
文章浏览阅读5.7k次。一.BCrypt基础在一个项目中，只要涉及用户的登陆注册，就涉及到用户密码的保护，用户的密码存在数据库是对管理员是透明的，所以为了防止管理员泄露密码，提高用户密码的安全性，我们通常会对用户密码进行加密后再存入数据库，目前MD5与Bcrypt使用比较多，都不可反向破解生成明文。但任何长度的密码使用MD5加密后长度都是相同的，固定的。而且一个密码使用MD5加密生成的密文唯一。那我就可以记下所有明文使用MD5加密后的密文，解密使用穷举就可以破解。MD5解密网站：https://www.bejson.com/en_bcrypt加密
互联网的载体－－操作系统_互联网载体-程序员宅基地
文章浏览阅读5k次。第一章 操作系统引论系统的目标：有效性（提高资源利用率和系统吞吐量）、方便性、可扩充性、开放性。有效性和方便性是操作系统最重要两个目标。操作系统的作用：(1) OS作为用户与计算机硬件系统之间的接口(2) OS作为计算机系统资源的管理者（处理器、存储器、I/O设备、数据程序）(3) OS实现了对计算机资源的抽象（在硬件上覆盖I/O设备、文件_互联网载体
px to rem & rpx & vw cssrem 设置_pxtovw,不想要vw-程序员宅基地
文章浏览阅读657次，点赞11次，收藏8次。第一步第二步第三步。_pxtovw,不想要vw
json文件-程序员宅基地
文章浏览阅读7.7k次，点赞3次，收藏35次。一般都使用类似字典的方式存储，但和字典不同，无论是键还是值，都要加上双引号。直接使用记事本打开：例如猫狗二分类。_json文件
wsl安装库的时候出现/usr/lib/wsl/lib/libcuda.so.1 is not a symbolic link-程序员宅基地
文章浏览阅读1.7k次，点赞3次，收藏6次。当在安装库的时候出现这个语句，是ld的链接出现了问题，我们只需要创建一个新的文件路径，在/usr/lib/wsl目录下创建一个文件夹，我使用的文件名字是lib2，大家只需要创建一个你们可以记得住的名字就行。将文件中的/usr/lib/wsl/lib修改为/usr/lib/wsl/lib2即可。输入sudo ldconfig看是否生效，没有报错就是成功了。_/usr/lib/wsl/lib/libcuda.so.1 is not a symbolic link
node.js/Vue-钓鱼分享平台设计与实现--80679（免费领源码+开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C++、python、数据可视化、大数据、全套文案-程序员宅基地
文章浏览阅读1.8k次，点赞45次，收藏44次。本系统采取MySQL作为后台数据的主要存储单元，采用Node.ja语言、JSP技术、Ajax技术进行业务系统的编码及其开发，设计了一个专门针对钓鱼爱好用户的钓鱼分享平台。
随便推点
安卓截屏技术+附带悬浮窗自动存储功能(1)-程序员宅基地
文章浏览阅读910次，点赞28次，收藏9次。今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司20年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
LWIP应用开发|LWIP移植和裁剪_lwip flash裁剪-程序员宅基地
文章浏览阅读1.2k次。LWIP移植和裁剪_lwip flash裁剪
CnOpenData商务服务业基本信息表-程序员宅基地
文章浏览阅读964次，点赞21次，收藏19次。截至2021.12.31。
通过Mixamo生成人物动画并导入Unity实现资源可用的方法_mixamo导出的模型没有材质球-程序员宅基地
文章浏览阅读1.2w次，点赞24次，收藏89次。通过Mixamo生成人物动画并导入Unity实现资源可用的方法：文章要点：如何通过Mixamo生成人物动画在Mixamo中生成的模型及动画导入Unity的设置（保持原有材质）在Unity中利用上述导入素材制作Animator如果你有自己的人物模型，想将自己的人物添加动画并运用到Unity项目中去；或者你没有自己的人物模型，但又想制作Unity人物动画，本篇记录将为你提供一种方式——自己的人物模型通过Mixamo（网址：https://www.mixamo.com/#/ ）生成动画的方法（教_mixamo导出的模型没有材质球
Python 学习——Python requests 库文档_python requests 文档-程序员宅基地
文章浏览阅读1k次，点赞19次，收藏27次。如果你改变了编码，每当你访问 r.text ，Request 都将会使用 r.encoding 的新值。如果你创建了自己的编码，并使用 codecs 模块进行注册，你就可以轻松地使用这个解码器名称作为 r.encoding 的值， 然后由 Requests 来为你处理编码。接收者可以合并多个相同名称的 header 栏位，把它们合为一个 “field-name: field-value” 配对，将每个后续的栏位值依次追加到合并的栏位值中，用逗号隔开即可，这样做不会改变信息的语义。_python requests 文档
计算机基础知识掌握评语,计算机学生老师评语-程序员宅基地
文章浏览阅读529次。计算机老师如何写评语主要是思维能力和操作能力两个方面当然如果有游戏的话，还要看是否守纪小学计算机老师如何写评语由于学生对计算机的学习普遍形式化,有些学生实际上也未学到什么知识,但一般学生,对开,关机以及简单的文字输入还是会的,所以,在写评语时,既不能过于夸大孩子的计算机能力,让家长误解为孩子懂电脑了,也不能说学生什么没有学到,这样家长也会认为孩子在学校学电脑只是一个样子,会与老师不负责相联系,那就..._知识点没掌握好怎么写评语