从网络摄像头中捕获图像并将其上传到Flask服务器

Question

我有一个网页，可以使用webcamjs从网络摄像头中捕获图像。我有一个flask服务器在后端，应该接受图像和其他表单数据。我无法使用XMLHttpRequest将图像发送到Flask服务器。 signup.html

    <form method="POST" enctype="multipart/form-data" id="myForm">
        <table>
            <tr>
                <td>Name/EmailId</td>
                <td>:  <input type="text" name="userID"></td>
            </tr>
            <tr>
                <td><input type="button" value="Upload" onclick="upload()"></td>
            </tr>
        </table>
    </form>
    <div id="my_camera"></div>
    <input type="button" onclick="snap()" value="Snap">
    <div id="results"></div>

JavaScript

function ShowCam() {
    Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 100
    });
    Webcam.attach('#my_camera');
}
window.onload= ShowCam;

function snap() {
    Webcam.snap( function(data_uri) {
        // display results in page
        document.getElementById('results').innerHTML = 
        '<img id="image" src="'+data_uri+'"/>';
      } );      
}

function upload() {
    console.log("Uploading...")
    var image = document.getElementById('image').src;
    var form = document.getElementById('myForm');
    var formData = new FormData(form);
    formData.append("file", image);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "/signup");
    xmlhttp.send(formData);
    console.log(formData.get('file'));
    console.log(formData.get('userID'));
}

从上面的javascript代码中可以看到，我使用console.log输出了'file'和'userID'。在chrome dev-tools中正确显示，但数据并未发送到flask服务器。我没有收到任何错误消息。

Python

@app.route('/signup', methods=['GET','POST'])
def signup():
    if request.method == 'POST':
        return jsonify(request.form['userID'], request.form['file'])
    return render_template('signup.html')

我试着通过简单地返回return jsonify(request.form['userID'])来实现，但也没有起作用。

PYTHON调试

127.0.0.1 - - [07/May/2018 17:15:39] "GET /signup HTTP/1.1" 200 -
127.0.0.1 - - [07/May/2018 17:15:39] "GET /static/webcamjs_min.js HTTP/1.1" 200 -
127.0.0.1 - - [07/May/2018 17:15:39] "GET /static/webcam.js HTTP/1.1" 200 -
127.0.0.1 - - [07/May/2018 17:15:57] "POST /signup HTTP/1.1" 200 -

这是Python的调试输出，正如您所看到的那样，POST请求返回了HTTP响应代码200，但Python中没有return语句的输出。

- Sunil

Answer 1

你的代码符合预期。唯一遗漏的是在你的javascript上传函数中没有读取成功的POST请求。

function ShowCam() {
    Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 100
    });
    Webcam.attach('#my_camera');
}
window.onload= ShowCam;

function snap() {
    Webcam.snap( function(data_uri) {
        // display results in page
        document.getElementById('results').innerHTML = 
        '<img id="image" src="'+data_uri+'"/>';
      } );      
}

function upload() {
    console.log("Uploading...")
    var image = document.getElementById('image').src;
    var form = document.getElementById('myForm');
    var formData = new FormData(form);
    formData.append("file", image);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "/signup");

    // check when state changes, 
    xmlhttp.onreadystatechange = function() {

    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        alert(xmlhttp.responseText);
        }
    }

    xmlhttp.send(formData);
    console.log(formData.get('file'));
    console.log(formData.get('userID'));
}

- Abhi