上传文件后 FLASK 应用程序页面没有变化，进度条工作正常

Question

我想对一个文本文件进行一些分析。在网页中上传文件后，我试图重定向路由，但这不起作用。令人惊讶的是，打印语句在重定向路由的控制台中是运行，但模板未呈现。

调试模式为真，我多次运行此命令设置FLASK_DEBUG=1。我迫切需要帮助:( 任何帮助将不胜感激。

imo javascript 中存在一些问题，无法让 python 更改 url。

我的前端页面是

<body>
    <div class="split left" >
        
        <img src="/static/acgt.png" class="logo"/>
        
        <h2><u>Description<br/><br/></u></h2>
        
        <p>There are some text in here</p>
        <br/>
        <br/>
        
        <div class="file-upload">
            <input class="file-upload__input" type="file" name="myFile" id="myFile" oninput="upload('{{ request.url }}');">
            <button class="file-upload__button" type="button" >Upload FASTA file from your device</button>
            <span class="file-upload__label"></span>
            
        </div>
        
        <div id="progress_wrapper" class="d-none">
            <label id="progress_status" style="color: white;">50% uploaded</label>
            <div class="progress mb-3">
                <div id="progress" class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div> 

        <div >
            <p class = "errorMsg" style="margin-top: 20px; color:#FF6347 ; font-size:1.3em;">{{errorMessage}}</p>
        </div>
        
    </div>
    
    <div class="split right">
        
    </div>
    
    <script>
        
        const btn = document.querySelector('.file-upload__button')
        const hiddenInput = btn.parentElement.querySelector('.file-upload__input');
        const label = btn.parentElement.querySelector('.file-upload__label');
        const defaultLabelText = '';
        
        label.textContent = defaultLabelText;
        label.title = defaultLabelText;
        
        
        btn.addEventListener('click', function ( ) {
            hiddenInput.click();
        });
        
        hiddenInput.addEventListener('change',function() {
            const filename = Array.prototype.map.call(hiddenInput.files, function (file) {
                return file.name;
            });
            label.textContent = filename || defaultLabelText;  
        });  
        
        
        function upload(url) {
            
            var progress_wrapper = document.getElementById("progress_wrapper");
            
            progress_wrapper.classList.remove("d-none");
            
            var progress = document.getElementById("progress");
            
            var progress_status = document.getElementById("progress_status");
            
            var data = new FormData();
            
            var request = new XMLHttpRequest();
            
            request.responseType = "json";
            
            var file = hiddenInput.files[0];
            console.log(typeof(file));
            
            var filename = file.name;
            console.log(filename)
            var filesize = file.size;
            document.cookie = `filesize=${filesize}`;
            
            data.append("file", file);
            
            request.upload.addEventListener("progress", function (e) {
                
                // Get the loaded amount and total filesize (bytes)
                var loaded = e.loaded;
                var total = e.total
                
                // Calculate percent uploaded
                var percent_complete = (loaded / total) * 100;
                
                // Update the progress text and progress bar
                progress.setAttribute("style", `width: ${Math.floor(percent_complete)}%`);
                progress_status.innerText = `${Math.floor(percent_complete)}% uploaded`;
                
            });

            request.addEventListener("loadend",function(e){
                if(request.status == 200) {
                    console.log("Success should be shown using alert")
                    
                }else{
                    console.log("Failed to upload the file, Sad life :(")
                }
            });

            request.open("post", url);
            request.send(data);
        }
        
    </script>
    
</body>

和python页面是

@app.route('/home', methods=["GET", "POST"])
def hello_world():
    if request.method == "POST":

        filesize = request.cookies.get("filesize")
        file = request.files["file"]
        res = make_response(jsonify({"message" : f"{file.filename} uploaded"}), 200)
        return redirect(url_for('dummyroute'))

    return render_template('home.html')

@app.route('/dummyroute')
def dummyroute():
    print("This is getting printed in console")
    return '<h1>I am getting mad<h1>'

Answer 1

如果您使用 JavaScript/AJAX 发送 request，则 response 将发送到此 JavaScript 代码 - JavaScript 的请求将重定向到 /dummyroute 和 JavaScript 从 /dummyroute 获得响应，但浏览器不会尝试将此 response 用于 redirect 整页。

AJAX 的发明目的是在您使用 AJAX.

时不重新加载整个页面，并且浏览器不会 reload/redirect 页面

您将直接在 JavaScript - document.location = '/dummyroute'

中进行整页重定向

上传文件后 FLASK 应用程序页面没有变化，进度条工作正常

page of FLASK app is not changing after uploading a file, progress bar works fine

python

flask

redirect

file-upload