Question

我的HTTP请求需要一些帮助。设置如下：

网页将图像加载到表单，然后将其发送到运行瓶的python服务器（带有表单或自定义的http请求）
瓶接收文件，将其作为python脚本的输入，接收结果并将其返回到网页

在Bottle的网站上，有一个带有以下格式的示例：https://bottlepy.org/docs/dev/tutorial.html#file-uploads我已经尝试过了，并且可以正常工作。这是我使用的代码：

class Konto
{
   public int Money {private set; get;}
   public Konto(int initialAmount)
   {
       Money = initialAmount;
   }

   public int Withdrawal(amount)
   {
      Money -= amount;
      return Money;
   }

   public void Deposit(int amount)
   {
      Money += amount;
   }
}

我在瓶子里有

<html>
  <head>
  </head>   
  <body>
    <form action="http://localhost:8080/solve" method="POST" enctype="multipart/form-data" norm="form" id='myForm'>
      Select a file: <input type="file" name="upload"/>
      <input type="submit" value="Start upload" />
    </form>
  </body>     
</html>

这“有效”，但是表单将我重定向到localhost：8080，这不是我想要的。我尝试将目标放到隐藏的iFrame中，以防止重定向，但我无法在iFrame的主体中访问结果...

我想要的是：发出一个类似于表单发出的HTTP请求。所以我尝试了：

@route('/solve', method='POST')
def solve():
    file     = request.files.get('upload')
    name, ext = os.path.splitext(file.filename)
    if ext not in ('.png','.jpg','.jpeg'):
        return 'File extension not allowed.'
    print(file.name)
    resolved = sudoku.solve(file.file)
    return str(resolved)

我已经使用网络中的开发工具进行了检查，尽管瓶子找不到文件，但请求似乎与表单发送的请求相同。

<html> <head> </head> <body> <form enctype="multipart/form-data" norm="form" id="myForm"> Select a file: <input id="fileInput" type="file" name="upload" accept="image/png, image/jpeg, image/jpg" /> <input type="submit" value="Start upload" /> <label class="button-upload" onclick="send()">Upload</label> </form> </body> <script> var _file = null; function send() { var file = document.getElementById("fileInput").files[0] console.log(file) var url = "http://localhost:8080/solve"; var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=---------------------------169461201884497922237853436" ); var formData = new FormData(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } }; formData.append("upload", file); xhr.send(formData); } </script> </html>返回file = request.files.get('upload')，而None返回file = request.files，所以有些事情，但是我不知道如何访问！

任何帮助将不胜感激！

Answer 1

您的JavaScript代码看起来不错，除了用xhr.setRequestHeader设置请求标头的地方。 FormData为您处理多部分编码，您无需手动设置请求标头。我只是尝试了一下，似乎可以很好地解决瓶子问题。

总体上，如下更改您的send()函数：

function send() {
  var file = document.getElementById("fileInput").files[0]
  console.log(file)
  var url = "http://localhost:8080/solve";

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  var formData = new FormData();

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      alert(xhr.responseText);
    }
  };
  formData.append("upload", file);
  xhr.send(formData);
}

如何使我的HTTP请求的行为与表单相同

1 个答案: