上传文件
flask后端
flask文件中:
from flask import Flask, request,render_template,send_from_directory
from flask_cors import CORS # 跨域请求模块
from jinja2 import Environment, FileSystemLoader
import os
from werkzeug.utils import secure_filename
app = Flask(__name__)
CORS(app) # 处理跨域请求
# 上传图片
@app.route('/upload',methods=['GET','POST'])
def upload_images():
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
UPLOAD_FOLDER = 'images/'
if request.method == 'POST':
print('request======>',request.files.get('file').filename) #get('file')是input标签name的名称,必须匹配。
file = request.files['file']
if file and file.filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS:
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'],filename))
url = UPLOAD_FOLDER+filename
return {"code":200,"url":url}
else:
return render_template('hello.html')
app.config["UPLOAD_FOLDER"] = "images/"
# 以下是服务器对外公开可以改为:app.run()
app.run(host="0.0.0.0", port=5000)
前端页面
在当前目录下创建templates目录:并在该目录中创建hello.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<p>welcome {{username}}</p>
<form action="/upload" enctype="multipart/form-data" method="post" >
<input type="file" name="file" />
<input type="submit" value="提交" >
</form>
{% if url %}
<img src="{{url}}">
{% endif%}
</body>
</html>
下载文件
后端
@app.route('/filename', methods=['GET', 'POST'])
def download():
Foder_Name = ["images"] # 文件夹下所有文件
# 获取到指定文件夹下所有文件
Files_Name=[]
list = os.listdir("/home/runner/flask/images")
for i in list:
Files_Name.append("https://flask.ljydlv.repl.co/download/"+i)
return render_template('download.html', allname=Foder_Name, name=Files_Name)
@app.route('/download/<filename>', methods=['GET''])
def downloads(filename):
#as_attachment设置为True时下载文件,设置为False时浏览器会直接打开
return send_from_directory(app.config['UPLOAD_FOLDER'], filename, as_attachment=False)
前端获取文件名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件下载</title>
<style>
a{
text-decoration: none;
color: #2062e0;
}
a:hover{
text-decoration: none;
color: #2062e0;
}
</style>
</head>
<body>
<div align="center">
<h1>文件下载</h1><br><br>
{# 输出文件名及文件详细信息(文件时间信息等) #}
{% for fruit in allname %}
<br>
{{ fruit }}
{% endfor %}
<br><br><br><br>
{# 将指定文件夹中的文件获取遍历显示 #}
{% for n in name %}
<a href="downloads/{{ n }}">{{ n }}</a>
<br><br>
{% endfor %}
</div>
</body>
</html>