前端代码关键部分
- 使用HTML的
<form>
标签创建表单,设置enctype="multipart/form-data"
,因为默认的application/x-www-form-urlencoded
不能处理文件上传。
- 添加一个
<input>
标签,类型为file
,用于选择要上传的文件。
- 添加一个提交按钮。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上传">
</form>
</body>
</html>
后端代码关键部分
- 导入必要的模块,如
Flask
和os
。
- 创建Flask应用实例。
- 定义上传文件保存的目录。
- 使用
@app.route
装饰器定义处理文件上传的路由,在视图函数中获取上传的文件并保存到指定目录。
示例代码如下:
from flask import Flask, request
import os
app = Flask(__name__)
# 定义上传文件保存的目录
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/upload', methods=['POST'])
def upload_file():
if 'file' not in request.files:
return '没有文件部分', 400
file = request.files['file']
if file.filename == '':
return '没有选择文件', 400
if file:
filename = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
file.save(filename)
return '文件上传成功'
if __name__ == '__main__':
if not os.path.exists(UPLOAD_FOLDER):
os.makedirs(UPLOAD_FOLDER)
app.run(debug=True)