一,读取前端请求数据
# coding:utf-8
from flask import Flask, request
app = Flask(__name__)
"""
前端请求数据:
属性 说明 类型
data json格式请求的数据(POST)
form 请求的表单数据(POST) 字典
args 请求url中的数据(GET) 字典
cookies 请求的cookies信息 字典
headers 请求报文头
method 请求方式 GET/POST
url 请求的url地址 string
files 上传的文件
path 用户的请求路径 /login
"""
@app.route("/index", methods=["GET", "POST"])
def index():
# request中包含了前端发送过来的所有请求数据
# form和data是用来提取请求体数据,无法获取url中的数据(类似于GET请求方式的数据),只能获取POST形式的表单数据
# 通过requset.form可以直接提取请求体中的表单格式的数据, 是一个类字典的对象
# 通过get方法只能拿到多个同名参数的第一个
## 【form--POST 方式获取前端请求数据】
name = request.form.get("name")
age = request.form.get("age")
name_li = request.form.getlist("name")
city1 = request.form.getlist("city")
# 如果是请求体的数据不是表单格式的(如json格式),可以通过request.data获取
## POST的raw形式的数据从data中获取
print("request.data: %s" % request.data)
## 【args--GET 方式获取前端请求数据】
# args是用来提取url中的参数(查询字符串)
city2 = request.args.get("city")
return "hello name=%s, age=%s, city1=%s,city2 = %s, name_li=%s" % (name, age, city1,city2, name_li)
#hello name=song, age=16, city1=['美国'],city2 = 中国, name_li=['song', 'fengchunmeng']
if __name__ == '__main__':
app.run(debug=True)
二,保存上传文件(前端+后端)
1.简单保存演示(无前端)
# coding:utf-8
from flask import Flask, request
app = Flask(__name__)
@app.route("/upload", methods=["POST"])
def upload():
"""接受前端传送过来的文件"""
file_obj = request.files.get("pic")
if file_obj is None:
# 表示没有发送文件
return "未上传文件"
# 【保存方法一--直接保存】将文件保存到本地
# 1. 创建一个文件
f = open("./demo.png", "wb")
# 2. 向文件写内容
data = file_obj.read()
print(data)
f.write(data)
# 3. 关闭文件
f.close()
# 【保存方式二--使用上下文管理器方式保存】
with open("./demo.png", "wb") as f:
data = file_obj.read()
f.write(data)
#【保存方法三--使用预设方法保存】
# 直接使用上传的文件对象保存
file_obj.save("./demo1.jpg")
return "上传成功"
if __name__ == '__main__':
app.run(debug=True)
2.文件上传保存(前端+后端)
- 前端控件
<!-- 必须要设置表单的enctype属性为multipart/form-data,表示文件上传
同时表单元素必须指定name属性,供后台接口获取其数据 -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<!--原生js方式上传,会跳转页面---不推荐-->
<!--<form action="/upload" method="post" enctype="multipart/form-data">-->
<!-- <input type="text" name="headline"/>-->
<!-- <textarea name="content"></textarea>-->
<!-- <input type="file" name="upfile" /> <!– 文件上传控件 –>-->
<!-- <!– 按钮类型必须为submit才能提交表单 –>-->
<!-- <input type="submit" value="开始上传" />-->
<!--</form>-->
<!--Ajax上传方式,不会跳转页面--主流上传文件方法-->
<input type="text" id="headline"/>
<textarea id="content"></textarea>
<input type="file" id="upfile" /> <!-- 文件上传控件 -->
<button onclick="doUpload()">上传</button>
<script>
function doUpload() {
var data = new FormData(); // 带附件上传
data.append("headline",$.trim($("#headline").val()));
data.append("content",$.trim($("#content").val()));
<!-- 此处为JavaScript添加文件的方式 -->
data.append("upfile",$("#upfile").prop("files")[0]);
$.ajax({
url: '/upload',
type: 'POST',
data: data, // 指定上传数据
cache: false,
processData: false,
contentType: false,
success : function(result) {
if(result == "Done"){
window.alert('恭喜你,上传成功.');
}else if (result == 'Invalid') {
window.alert('文件类型不匹配.');
}
},
error : function(responseStr) {
window.alert('上传失败');
}
});
}
</script>
- 后端接口
from flask import Flask,render_template,request
app = Flask(__name__, template_folder='templates', static_url_path='/', static_folder='resource')
@app.route('/')
def pre_upload():
return render_template('文件上传.html')
@app.route('/upload', methods=['POST'])
def do_upload():
headline = request.form.get('headline')
content = request.form.get('content')
file = request.files.get('upfile')
print(headline, content) # 可以正常获取表单元素的值
suffix = file.filename.split('.')[-1] # 取得文件的后缀名
# 也可以根据文件的后缀名对文件类型进行过滤,如:
if suffix.lower() not in ['jpg', 'jpeg', 'png', 'rar', 'zip', 'doc', 'docx']:
return 'Invalid'
# 将文件保存到某个目录中
# file.save('D:/test001.' + suffix)
file.save('./文件上传测试/test001.' + suffix)
return 'Done'
if __name__ == '__main__':
app.run(debug=True)