flask & reactjs загрузка файла не работает

Question

Я новичок в python flask, я использую flask в бэкэнде и реагирую js в клиентской части и pymon go для базы данных. Я хочу загрузить файл с ReactJs на сервер flask, я получаю сообщение об ошибке при выполнении метода second . Как это сделать. Ниже приведен код, который я пробовал.

Я пробовал два примера, один из которых работает, а другой - нет, я не знаю почему.

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand. KeyError: 'file'

1. Непосредственная отправка файла в API. Дело 1

Python код

import os
from flask import Flask, flash, request, redirect, url_for
from werkzeug.utils import secure_filename

UPLOAD_FOLDER = '/path/to/the/uploads'
ALLOWED_EXTENSIONS = set([ 'png', 'jpg', 'jpeg'])

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/api/users/add_photo', methods=['POST', "GET"])
def upload_file():
    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 a 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)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            image = upload(open(filename, 'rb'))
            user_id = user.insert({"file":image})
            return jsonify({'result': "file Upload successfully!!!"})

onSubmitImage(e) {
    let file = this.state.file;
    let formData = new FormData();
    formData.append("file", file);
    this.props.imageUpload(formData);
  }

Приведенный выше пример работает отлично

Отправка файла в API в объекте. Дело 2

Python код

import os
from flask import Flask, flash, request, redirect, url_for
from werkzeug.utils import secure_filename

UPLOAD_FOLDER = '/path/to/the/uploads'
ALLOWED_EXTENSIONS = set([ 'png', 'jpg', 'jpeg'])

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/api/users/add_photo', methods=['POST', "GET"])
def upload_file():
    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']
        name = request.get_json(force=True)["name"]
        last_name = request.get_json(force=True)["last_name"]
        email = request.get_json(force=True)["email"]
        # if user does not select file, browser also
        # submit a 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)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            image = upload(open(filename, 'rb'))
            user_id = user.insert({"file":image,"name":name,"last_name":last_name,"email":email})
            return jsonify({'result': "file Upload successfully!!!"})

 onSubmitImage(e) {
    let file = this.state.file;
    let formData = new FormData();
    formData.append("file", file);
    const data = {
      file: formData
      name: this.state.name
      last_name: this.state.last_name
      email: this.state.last_name
    };
    this.props.imageUpload(data);
  }

Не знаю почему сначала работает, а секунда нет. Я хочу реализовать второй пример, потому что есть другие данные, такие как имя, фамилия, электронная почта с файлом изображения.

Answer 1

Вам необходимо добавить свои данные в FormData () - ie

let file = this.state.file;
let formData = new FormData();
formData.append("file", file);
formData.append("name", this.state.name);
formData.append("last_name", this.state.last_name)
formData.append("email", this.state.last_name)
this.props.imageUpload(formData);