网硕互联帮助中心这里写自定义目录标题
- Flask这种轻量级框架比较适合新手
-
- 1.首先是入口程序app.py
- 2.目录结构
- 3.html页面方便给客户显示内容
- 4.实例说明和用户操作
Flask这种轻量级框架比较适合新手
最近需要用到简易服务器上传图像功能，于是边学边记录利用Flask完成传图功能，web知识较欠缺，老手勿喷！
1.首先是入口程序app.py
附上完整代码，启动Falsk设置一些参数特别是ip和端口还有静态文件夹，方便用户访问图片等等。需要安装Flask模块，pip3 install Flask Flask-WTF。以下是程序入口app.py文件
from flask import Flask, render_template, request, jsonify
from flask_wtf import FlaskForm, CSRFProtect
from werkzeug.utils import secure_filename
from wtforms import FileField, SubmitField
from wtforms.validators import DataRequired
import os
import secrets
from datetime import timedelta
# from helper.utils import is_valid_image
##########注意这里必须写static_folder，否则下面用户请求不到图片
app = Flask(__name__,static_folder='uploads')
app.config['SECRET_KEY'] = 'youdontknowdontknow' # 用于表单的CSRF保护
app.config['UPLOAD_FOLDER'] = 'uploads/' # 图片上传的文件夹
app.config['MAX_CONTENT_LENGTH'] = 4 * 1024 * 1024 # 限制文件大小为4MB
csrf = CSRFProtect(app)
# 设置允许的文件格式
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'JPG', 'PNG', 'bmp'])
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
class UploadForm(FlaskForm):
file = FileField('file', validators=[DataRequired()])
submit = SubmitField('submit')######注意这个名字必须和html上按钮一致
@app.route('/upload', methods=['POST', 'GET']) # 添加路由
def upload_file():
_form = UploadForm()###这个类是用于两边通信的，方便两边需要
if request.method == 'POST':
if _form.validate_on_submit():
file = _form.file.data
if not (file and allowed_file(file.filename)):
return jsonify({"error": 1001, "msg": "请检查上传的图片类型，仅限于png、PNG、jpg、JPG、bmp"})
user_input=request.form.get("name")
filename = secrets.token_hex(8) + "_" + file.filename # 使用安全的文件名
relate_path=os.path.join(app.config['UPLOAD_FOLDER'], secure_filename(filename))
basepath = os.path.dirname(__file__) # 当前文件所在路径
upload_path = os.path.join(basepath, relate_path)
file.save(upload_path)
# if not is_valid_image(upload_path):
# os.remove(upload_path) # 如果图片无效，删除文件
# return "Invalid image format or corrupted image."
return render_template('uploaded.html', filename=relate_path,userinput=user_input)
return render_template('upload.html',form=_form)
@app.route('/')
def main_web():#全部主页请求会到这
return render_template('upload.html',form=UploadForm())#upload.html页面中必须要有form，没有这里就新建个给过去
@app.route('/uploaded')
def uploaded_file(filename):
return render_template('uploaded.html', filename=filename)
if __name__ == '__main__':
# 确保上传文件夹存在
if not os.path.exists(app.config['UPLOAD_FOLDER']):
os.makedirs(app.config['UPLOAD_FOLDER'])
# 设置静态文件缓存过期时间
app.send_file_max_age_default = timedelta(seconds=1)
app.run(port=8022, debug=False)
2.目录结构
app.py同级目录下新建2个文件夹，分别是templates和uploads，一个用来存html文件，一个用来存图片。
3.html页面方便给客户显示内容
在templates目录下创建upload.html和uploaded.html文件。一个用于给用户上传，一个用于显示上传结果。 upload.html代码附下：
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Upload Image</title>
</head>
<body>
<h1>Upload a new File</h1>
<form type="form" name="form" method="POST" action="/upload" enctype="multipart/form-data">
<input type="file" name="file" style="margin-top:20px;"/>
<br>
<i>请输入你当前的文本（开心、不开心、开不开心）：</i>
<input type="text" class="txt_input" name="name" value="开心" style="margin-top:10px;"/>
{{form.csrf_token}}
{{form.submit}}
</form>
</body>
</html>
uploaded.html代码附下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask上传图片演示</title>
</head>
<body>
<h1>使用Flask上传本地图片并显示示例一</h1>
<h1>阁下的文字是：{{userinput}}！</h1>
<img src="{{filename}}" width="400" height="400" alt="你的图片无法访问"/>
</body>
</html>
4.实例说明和用户操作
例子较简单，用户浏览器输入http://127.0.0.1:8022访问，点选择图片的按钮再上传，如果成功会在跳转页面显示文本以及图片。 如下： 
评论前必须登录！
注册