Не удается обработать загрузку файлов с помощью FormData () и jQuery во Flask

Question

Я пытаюсь проверить простую загрузку файла со страницы html на локальный сервер Flask.

Это HTML-код

<form action="/" method="post">
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <input type="text" name="test" id="test" placeholder=".medium-6.cell">
      <div class="cell small-6">
          <label for="exampleFileUpload" class="button">Choose File</label>
          <input type="file" id="exampleFileUpload" name="exampleFileUpload" class="show-for-sr">
      </div>
      <div class="cell small-6">
        <button type="submit" class="button secondary">Upload and test</button>
      </div>
    </div>
  </div>
</form>

Это код JavaScript

<script>
  $("form").submit(function(event){

    event.preventDefault();

    var pictureInput = document.getElementById("exampleFileUpload");
    var myFormData = new FormData();
    myFormData.append('pictureFile', pictureInput.files[0]);

    // Display the key/value pairs
    for (var pair of myFormData.entries()) {
        console.log(pair[0]+ ', ' + pair[1]); 
    }

    $.ajax({
      url: 'http://127.0.0.1:5000/img-detect/',
      type: 'POST',
      data: myFormData,
      async: false,
      cache: false,
      dataType : 'json',
      processData: false,
      success: function (returndata) {
        console.log(returndata)
      }
    });

    return false;
  });
</script>

Отладка console.log печатает pictureFile, [object File].

И, наконец, код колбы

from flask import Flask, jsonify, flash, request, redirect, url_for
from werkzeug.utils import secure_filename
from flask_cors import CORS
import os
app = Flask(__name__)
CORS(app)

UPLOAD_FOLDER = './uploads'
ALLOWED_EXTENSIONS = set(['jpg', 'jpeg', 'gif'])

app.secret_key = 'super secret key'
app.config['SESSION_TYPE'] = 'filesystem'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/img-detect/', methods=['POST'])
def img_detect():
    print(request.files)
    # outputs ImmutableMultiDict([])

    if 'pictureFile' not in request.files:
        flash('No file part')
        return jsonify({'outcome': 'error 1'})

    file = request.files['pictureFile']
    # if user does not select file
    if file.filename == '':
        flash('No selected file')
        return jsonify({'outcome': 'error 2'})
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return jsonify({'outcome': 'success'})

Flask всегда возвращает error 1, а reques.files всегда выводит ImmutableMultiDict([]).

Любой намек на то, что я делаю не так?

Спасибо

Answer 1

При отправке двоичных данных в запросе AJAX вам необходимо установить contentType: false, а также processData: false.

Я бы также предложил вам удалить async: false, поскольку это невероятно плохая практика.Вы уже передаете асинхронный обратный вызов в функции-обработчике success, поэтому нет необходимости принудительно делать запрос синхронным.