Warum Ajax FormData in request.data anstelle von request.files?

Question

Flask, und ich möchte eine Bilddatei über einen AJAX-Aufruf in HTML hochladen.

function mysubmit(input){ 
    var file_input = document.getElementById('file-input-left'); 
    var form_data = new FormData(); 
    var file = file_input.files[0]; 
    alert(file); 
    form_data.append('file', file); 
    $.ajax({ 
     type: 'POST', 
     url: '/calc_full_result', 
     data: form_data, 
     contentType: false, 
     cache: false, 
     processData: false, 
     async: false, 
     success: function(data){ 
      alert('Success!'); 
     }, 
    }); 
} 

Und die HTML:

<div class="image-holder"> 
    <form action="/calc_full_result" id="upload-form-left" name="form-left" method=post enctype=multipart/form-data> 
    <div class="image-holder-left"> 
     <div class="image-upload"> 
     {% if img_left %} 
     <label id="upload-left-label" for="file-input-left"><img id="left-image" src="data:image/png;base64, {{img_left}}"/></label> 
     {% else %} 
     <label id="upload-left-label" for="file-input-left"><img id="left-image" src="{{url_for('static', filename='upload_fill.png')}}" /></label> 
     {% endif %} 
     <input id="file-input-left" type=file name=file onchange="mysubmit(this)"/> 
     </div> 
    </div> 
    <form action="/calc_full_result" id="upload-form-right" name="form-right" method=post enctype=multipart/form-data> 
    <div class="image-holder-right"> 
     <div class="image-upload"> 
     {% if img_right %} 
     <label id="upload-right-label" for="file-input-right"><img id="right-image" src="data:image/png;base64, {{img_right}}"/></label> 
     {% else %} 
     <label id="upload-right-label" for="file-input-right"><img id="right-image" src="{{url_for('static', filename='upload_fill.png')}}"/></label> 
     {% endif %} 
     <input id="file-input-right" type=file name=file onchange="mysubmit(this)"/> 
     </div> 
    </div> 
    </form> 
</div> 

Dann in app.py:

@app.route('/calc_full_result', methods=['POST']) 
def calc_full_result(): 
    if request.method == 'POST': 
     file = request.files['file'] 
     return jsonify(result="suc") 

Aber ich kann nicht die Objektdatei erhalten, ist es immer

ich dieses Javascript geschrieben leer und kann nicht gespeichert werden. Wenn ich die Anfrage überprüfe, sehe ich len(request.data) ist fast die Größe der Bilddatei. Ich frage mich, warum request.files leer ist und wie Sie die Datei in request.data speichern? Ist es möglich?

Answer 1

Versuchen:

data: new FormData(document.getElementById('upload-form-left'))