如何在Flask中将JavaScript处理结果返回至Python HTTP请求？

嘿，这个需求完全可以实现！我来给你拆解下思路和具体的落地方法：

你把JS处理逻辑嵌入template.html的方式是完全可行的，但要明确一点：前后端是独立运行的（前端在浏览器环境，后端在服务器），后端没法直接读取前端JS里的变量——必须通过前端主动发起HTTP请求，把处理后的结果发送给Flask的POST接口，这是前后端数据交互的核心逻辑。

下面是一步步的具体做法：

1. 先搭建Flask的基础接口 #

首先需要两个核心接口：一个用来渲染带JS处理逻辑的页面，另一个用来接收前端传来的处理结果：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 渲染视频处理页面（GET请求）
@app.route('/')
def index():
    return render_template('template.html')

# 接收前端发送的处理结果（POST请求）
@app.route('/submit-processed-result', methods=['POST'])
def receive_result():
    # 根据前端传的格式获取数据：如果是JSON就用get_json()，如果是文件就用request.files
    processed_data = request.get_json()
    
    # 这里可以做你需要的后端处理，比如保存数据、生成文件、调用其他服务等
    print("收到处理后的结果：", processed_data)
    
    # 返回响应给前端，告诉它结果已接收
    return jsonify({"status": "success", "msg": "处理结果已收到"})

if __name__ == '__main__':
    app.run(debug=True)

2. 在template.html中编写JS逻辑并发送结果 #

假设你的JS已经完成了视频处理，得到了processedResult变量（可能是处理后的视频Blob、提取的特征数据、或者其他结构化信息），接下来用Fetch API把它发送给Flask后端：

<!DOCTYPE html>
<html>
<head>
    <title>视频处理工具</title>
</head>
<body>
    <!-- 用户上传视频的控件 -->
    <input type="file" id="videoUpload" accept="video/*">
    <button onclick="handleVideoProcess()">开始处理并提交</button>

    <script>
        async function handleVideoProcess() {
            const videoFile = document.getElementById('videoUpload').files[0];
            if (!videoFile) {
                alert("请先选择视频文件！");
                return;
            }

            // 这里替换成你实际的JS视频处理逻辑，比如用FFmpeg.js处理视频
            const processedResult = await processVideoWithJS(videoFile);

            // 把处理结果发送给Flask后端
            try {
                const response = await fetch('/submit-processed-result', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json', // 传递JSON数据时用这个头
                        // 如果是传递Blob文件，把Content-Type改成对应的类型，比如'video/mp4'
                    },
                    body: JSON.stringify({
                        video_features: processedResult.features,
                        processed_video_url: processedResult.videoUrl
                    })
                });

                const resData = await response.json();
                alert(resData.msg); // 提示用户提交成功
            } catch (err) {
                console.error("提交失败：", err);
                alert("提交结果失败，请重试");
            }
        }

        // 模拟你的JS视频处理函数
        async function processVideoWithJS(videoFile) {
            // 这里写实际的处理逻辑，比如裁剪、提取帧、转码等
            return {
                features: ["场景1", "人物检测", "音频特征"],
                videoUrl: URL.createObjectURL(videoFile)
            };
        }
    </script>
</body>
</html>

3. 特殊情况处理（比如传递大型视频文件） #

如果JS处理后的结果是大型视频文件，用JSON传递会有问题，建议用FormData来发送：

// 假设processedResult是处理后的视频Blob
const formData = new FormData();
formData.append('processed_video', processedResult, 'processed_video.mp4');

// 发送请求
const response = await fetch('/submit-processed-result', {
    method: 'POST',
    body: formData
});

后端接收文件的方式也要调整：

@app.route('/submit-processed-result', methods=['POST'])
def receive_result():
    processed_video = request.files.get('processed_video')
    if processed_video:
        # 保存文件到服务器
        processed_video.save(f"./processed_videos/{processed_video.filename}")
        return jsonify({"status": "success", "msg": "视频文件已接收并保存"})
    return jsonify({"status": "error", "msg": "未收到视频文件"})

你当前的嵌入方式是可行的，核心就是通过前端主动发起POST请求把JS处理后的结果传递给Flask后端。用Fetch API（或者传统的AJAX）是最常用的方式，根据数据类型选择JSON、FormData或者Blob来传递即可。

内容的提问来源于stack exchange，提问作者kkawabat