HTML前端与Python后端集成问题：Flask对接后返回值无法显示

核心问题分析 #

1. 前端文件上传方式错误：你用$("#wavFile").val()获取的是本地文件路径，浏览器安全机制会阻止后端直接访问该路径，且这种方式未实际上传文件内容。
2. 请求格式不匹配：前端用JSON.stringify传递路径，后端期望接收文件而非字符串；同时$.post默认的请求头与文件上传不兼容。
3. 后端返回结构不匹配：前端期望读取transcription.result，但后端直接返回字符串的JSON化结果，无result键。
4. 跨域问题：若前端以file://协议打开本地HTML，调用http://127.0.0.1:5000会触发跨域拦截。

前端代码修改 #

替换原JavaScript部分为以下代码，改用FormData上传文件：

$("#submit-button").click(function(event) {
    event.preventDefault();
    const formData = new FormData();
    const file = $("#wavFile")[0].files[0];
    
    if (!file) {
        alert("请先选择WAV文件");
        return;
    }
    formData.append("myFile", file);
    
    $.ajax({
        url: "http://127.0.0.1:5000/predict",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $("#result").text(response.result);
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error("请求失败:", error);
            $("#result").text("请求出错，请查看控制台");
        }
    });
});

后端代码修改 #

1. 先安装跨域依赖：pip install flask-cors
2. 修改Flask代码，处理文件上传并匹配返回结构：

from flask import Flask, jsonify, request
from flask_cors import CORS
# 导入你的模型、处理器等依赖
# from your_model_module import model, device, processor

app = Flask(__name__)
CORS(app)  # 允许跨域请求

# 提前初始化模型和设备（根据你的实际代码完成）
# model = ...
# device = ...

@app.route('/predict', methods=['POST'])
def predict_route():
    # 检查是否有文件上传
    if 'myFile' not in request.files:
        return jsonify({"error": "未检测到上传文件"}), 400
    
    file = request.files['myFile']
    if file.filename == '':
        return jsonify({"error": "未选择文件"}), 400
    
    # 保存临时文件供模型处理
    temp_file_path = "temp_upload.wav"
    file.save(temp_file_path)
    
    # 调用预测函数
    transcription = predict(model, device, temp_file_path)
    
    # 返回前端期望的结构
    return jsonify({"result": transcription})

def predict(model, device, path):
    # 你的原有预测逻辑（保持不变）
    ...
    transcription = processor.decode(predicted_ids[0])
    return transcription  # 直接返回字符串，由路由函数包装为JSON

额外注意事项 #

• 确保后端的model、device、processor已正确初始化。
• 临时文件可改用tempfile模块生成，避免文件名冲突。
• 测试时先启动Flask后端，再打开前端页面。
• 若仍有问题，查看浏览器控制台的错误信息（如跨域、请求状态码）定位问题。

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