如何使用 Javascript 中的 Fetch API 将字符串中的 HTML 从 HTML 发送到 Python（使用 Flask）

Question

我正在设计一个从 HTML 页面接收 XML 文件并使用 Flask 将其发送到 Python 的应用程序 这是我的 HTML（前端）代码

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

我正在使用带有 Python 的 Flask 来运行我的后端，我正在使用 POSTMAN（我在下面显示它）并在其上发送一个 XML 并返回应该返回的内容 这是我的 Python 代码

@app.route('/Students', methods=['POST'])
def loaddata():
    # this is a list 
    global dataArray

    entry= request.data.decode('utf-8')

    xmlentry= ET.fromstring(entry)

    for student in xmlentry.findall('STUDENT'):
        name= dte.find('NAME').text
        address = dte.find('ADDRESS').text
        new = DataObject(name,adress)

        # DataObject its a class, i am using OOP
        dataArray.append(new)


    return jsonify({'Mensaje':'Students added to the database',})

但我不知道如何从 HTML 文件发送 XML 数据并使其与我的 Python 后端一起使用，我之前使用过 Fetch，但对于这种特殊情况没有 这是我的 JavaScript 代码混乱

var file1 = document.getElementById("file");

function send() {

fetch('localhost:3000/Students', {
            method: 'POST',
            body: file1,
            headers:{
              'Content-Type': 'text/plain',
              'Access-Control-Allow-Origin': '*',}})
        .then(res => res.json())
        .catch(err => {
                console.error('Error:', err)
                alert("Ocurrio un error, ver la consola")
        })
        .then(response =>{
          console.log(response);
          alert(response.Mensaje)
        })
    }

我能做什么？ This is my program tested with POSTMAN

Answer 1

考虑以下 HTML / JavaScript。

function send(file) {
  var formData = new FormData();
  formData.append('xmlFile', file);
  fetch('localhost:3000/Students', {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*',
      }
    })
    .then(res => res.json())
    .catch(err => {
      console.error('Error:', err)
      alert("Ocurrio un error, ver la consola")
    })
    .then(response => {
      console.log(response);
      alert(response.Mensaje)
    })
}

var fileInp = document.getElementById("files");
var sendBtn = document.getElementById("filesBtn");
sendBtn.addEventListener('click', (event) => {
  if (fileInp.files[0] !== undefined) {
    send(fileInp.files[0]);
  } else {
    alert("Please select a XML File.");
  }
});

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

这基于以下示例：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file

当用户点击发送时，file 被发送到函数。新的表单数据被创建并 POST 到服务器。

您可能需要调整您的 Python。见这里：Get the data received in a Flask request