如何使我的 HTTP 请求的行为与表单相同
[英]How to make my HTTP request behave the same as a form
问题描述
I'd need some help with my HTTP request.
我的 HTTP 请求需要一些帮助。 Here's the setup:这是设置：
- A webpage load an image to a form and send it to a python server running bottle (with the form or a custom http request)网页将图像加载到表单并将其发送到运行 Bottle 的 python 服务器（使用表单或自定义 http 请求）
- Bottle receive the file, give it as an input for a python script, receive the result and return it to the webpage Bottle 接收文件，将其作为 python 脚本的输入，接收结果并将其返回到网页
On bottle's website there's an example with a form: https://bottlepy.org/docs/dev/tutorial.html#file-uploads I've tried it and it works.在bottle 的网站上有一个带有表单的示例： https : //bottlepy.org/docs/dev/tutorial.html#file-uploads我已经尝试过它并且可以正常工作。 Here's the code I used:这是我使用的代码：
<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>
In bottle I have:在瓶子里我有：
@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)
This "works", but the form redirects me to localhost:8080 and it's not what I want.这“有效”，但表单将我重定向到 localhost:8080 这不是我想要的。 I tried putting the target to a hidden iFrame, which prevent the redirection, but I don't manage to access the result in the body of the iFrame...我尝试将目标置于隐藏的 iFrame 中，这会阻止重定向，但我无法访问 iFrame 正文中的结果...
What I want: Make an HTTP request similar to the one made by the form.我想要什么：发出一个类似于表单发出的 HTTP 请求。 So I tried:所以我试过：
<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>
I've checked with the developper tool in network and the request seems to be the same as the one sent by the form, though bottle can't find the file.我已经使用网络中的开发人员工具进行了检查，请求似乎与表单发送的请求相同，但 Bottle 找不到该文件。
The file = request.files.get('upload') returns None and file = request.files returns <bottle.FormsDict object at 0x7ff437abf400> so there's something but I don't understand how to access it! file = request.files.get('upload')返回None并且file = request.files返回<bottle.FormsDict object at 0x7ff437abf400>所以有一些东西，但我不明白如何访问它！
Any help would be greatly appreciated!任何帮助将不胜感激！
1 个解决方案
解决方案1
1 已采纳 2019-03-24 14:14:55
Your JavaScript code seems fine, except for where you set request headers with xhr.setRequestHeader .您的 JavaScript 代码看起来不错，除了您使用xhr.setRequestHeader设置请求标头的xhr.setRequestHeader 。 FormData handles multipart encoding for you, you don't need to set request headers manually. FormData为您处理多部分编码，您无需手动设置请求标头。 I just tried it, and it seems to be working fine with bottlepy.我刚刚尝试过，它似乎与 Bottlepy 一起工作得很好。
Overall, change your send() function as follows:总的来说，改变你的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);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.