如何通过JavaScript Fetch API将HTML端XML文件发送到Python Flask后端

1. 前端代码修改 #

1.1 HTML部分（无核心错误，仅确认ID一致即可） #

<input type="file" id="files"  class="form-control" accept=".xml" required />
<button onclick="send()" style="width: 150px;" class="btn btn-primary">Send</button>

1.2 JavaScript部分修正 #

原JS存在DOM ID写错、直接传递DOM元素而非文件内容、请求URL缺少协议头、错误携带仅后端需要返回的CORS头的问题，修正后代码如下：

function send() {
    // 匹配HTML的id属性值获取文件选择框
    const fileInput = document.getElementById("files");
    if (!fileInput.files.length) {
        alert("请先选择XML文件");
        return;
    }
    // 读取XML文件内容
    const reader = new FileReader();
    reader.onload = function(e) {
        const xmlContent = e.target.result;
        // 替换为你后端实际运行的地址+端口，不要遗漏http://协议头
        fetch('http://localhost:3000/Students', {
            method: 'POST',
            body: xmlContent,
            headers:{
                'Content-Type': 'application/xml'
            }
        })
        .then(res => res.json())
        .catch(err => {
                console.error('Error:', err)
                alert("发送出错，详见控制台")
        })
        .then(response =>{
          console.log(response);
          alert(response.Mensaje)
        })
    };
    reader.readAsText(fileInput.files[0]);
}

2. 后端Flask代码修正 #

原后端存在变量名拼写错误、缺少跨域支持的问题，修正后代码如下：

from flask import Flask, request, jsonify
from flask_cors import CORS
import xml.etree.ElementTree as ET

app = Flask(__name__)
# 开启跨域支持，解决前端跨域请求报错
CORS(app)

# 此处为你定义的DataObject类，根据实际逻辑调整
class DataObject:
    def __init__(self, name, address):
        self.name = name
        self.address = address

dataArray = []

@app.route('/Students', methods=['POST'])
def loaddata():
    global dataArray
    entry= request.data.decode('utf-8')
    xmlentry= ET.fromstring(entry)
    # 修正原代码的变量名错误：dte改为循环变量student，address拼写修正
    for student in xmlentry.findall('STUDENT'):
        name= student.find('NAME').text
        address = student.find('ADDRESS').text
        new = DataObject(name,address)
        dataArray.append(new)
    return jsonify({'Mensaje':'Students added to the database',})

if __name__ == '__main__':
    # 端口和前端请求的3000保持一致，或修改前端请求端口为实际后端端口
    app.run(port=3000, debug=True)

注意事项 #

• 启动后端前先安装依赖：pip install flask flask-cors
• 确认XML文件结构符合解析逻辑，根节点下直接为STUDENT节点，且包含NAME、ADDRESS子节点

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