使用python和flask将文件从File_storage发送到前端嵌入到iframe中

问题描述 投票:0回答:1

在过去的几天里,我一直在尝试将文件发送到我的前端以在 iframe 中渲染,但我一直在努力解决这个问题。我正在使用 python 和 Flask。 我没有提供任何代码,因为我已经问过这个问题,但还没有得到修复它的回复。

python flask iframe
1个回答
0
投票

一般来说,任何位于静态文件夹或其子文件夹中的静态文件都可以在 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>
© www.soinside.com 2019 - 2024. All rights reserved.