在过去的几天里,我一直在尝试将文件发送到我的前端以在 iframe 中渲染,但我一直在努力解决这个问题。我正在使用 python 和 Flask。 我没有提供任何代码,因为我已经问过这个问题,但还没有得到修复它的回复。
一般来说,任何位于静态文件夹或其子文件夹中的静态文件都可以在 Flask 中访问。可以在此处找到相关说明。
如果您使用静态文件夹以外的目录来存储上传的文档,则您将需要一个单独的路径来提供相应的文档。
send_from_directory
从目录中提供上传的文档,以便它们可以显示在框架中。为此,只需使用 url_for
创建相应端点的 URL,然后将其分配给框架的 src 属性。
from flask import (
Flask,
redirect,
render_template,
request,
send_from_directory,
url_for
)
from werkzeug.utils import secure_filename
import os
app = Flask(__name__)
app.config.from_mapping(
SECRET_KEY='your secret here',
UPLOAD_FOLDER=os.path.join(app.instance_path, 'uploads')
)
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
@app.route('/')
def index():
files = os.listdir(app.config['UPLOAD_FOLDER'])
return render_template('files/index.html', **locals())
@app.post('/upload')
def upload():
file = request.files.get('file')
if file and file.filename != '':
file.save(os.path.join(
app.config['UPLOAD_FOLDER'],
secure_filename(file.filename)
))
return redirect(url_for('index'))
@app.route('/download/<path:filename>')
def download(filename):
return send_from_directory(
app.config['UPLOAD_FOLDER'],
filename,
)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
</head>
<body>
<main>
<div>
<form action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
<button>Upload</button>
</form>
</div>
<div>
<ul>
{% for file in files -%}
<li><a class="file-item" href="{{ url_for('download', filename=file) }}">{{ file }}</a></li>
{% endfor -%}
</ul>
</div>
<iframe id="frame" style="width: 100%; height: 480px"></iframe>
</main>
<script>
(function() {
const frame = document.getElementById('frame');
const items = document.querySelectorAll('a.file-item');
items.forEach(item => {
item.addEventListener('click', function(event) {
event.preventDefault();
frame.src = this.href;
})
});
})();
</script>
</body>
</html>