使用javascript将二进制文件（Dicom文件）上传到flask服务器并同时接收JSON响应答案

【问题标题】：Uploading Binary file (Dicom file) to flask server and receiving JSON response at the same time using javascript使用javascript将二进制文件（Dicom文件）上传到flask服务器并同时接收JSON响应
【发布时间】：2020-12-23 07:12:38
【问题描述】：

我正在尝试将 dicom 文件上传到运行深度学习模型的烧瓶服务器，并以 JSON 格式从服务器获取预测值！

所以问题出在下面的 javascript 代码中。有没有办法同时发送和获取值？请帮忙！！

HTML：

<body>
<input id="image-selector" type="file">    
<button id="predict-button">Predict</button>

<p><h1>PREDICTIONS</h1></p>
<span id="predicted-value_1">
<span id="predicted-value_2">
<span id="predicted-value_3">
</body>

JavaScript

$("#predict-button").click(function(){

    var form_data = new FormData();
    var ins = document.getElementById('image-selector').files.length;

    if(ins == 0) {
        $('#msg').html('<span style="color:red">Select one file</span>');
            return;
    }
    else{
        form_data = document.getElementById('image-selector').files[0]
    }

    let message = {
        "file": form_data
    }
    console.log(message);
    

    $.post("http://127.0.0.1:5000/predict", JSON.stringify(message), function(response){
    $("#predicted-value_1").text(response.prediction.value1);
    $("#predicted-value_1").text(response.prediction.value2);
    $("#predicted-value_1").text(response.prediction.value3);
    console.log(response);
    });
});

Python

@app.route("/predict", methods=['GET', 'POST'])
def predict():

if request.method == 'POST':
    # check if the post request has the file part
    if 'file' not in request.files:
        flash('No file part')
        return redirect(request.url)
    
    file = request.files['file']
    # if user does not select file, browser also
    # submit an empty part without filename
    if file.filename == '':
        flash('No selected file')
        return redirect(request.url)
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
   #Rest of the code! I can take it from here!!

【问题讨论】：

标签： javascript python json flask binary

【解决方案1】：

我在烧瓶演示中做了类似的事情。你可以看看试试看。

HTML

    <h4>Welcome to ImageClassifier Demo</h4>
    <input type=text size=5 name=url>
    <button id="prediction" type="submit">
        <span>Predict</span>
    </button>
    <span id=result>
        Result:
    </span>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#prediction').bind('click', function() {
                $.getJSON('/predict', {
                    a: $('input[name="url"]').val()
                    }, function(data) {
                        console.log("Result Received")
                        $("#result").text("Result: " + data.result);
                        });
                return false;
            });
        });
    </script>

【讨论】：

我试了很多次都没有改变，Flask终端一直返回错误码302。