Проблема с отправкой изображения из React на Flask

Question

У меня есть следующий код ReactJS + HTML:

import React, { useState } from 'react';

export const sendImage = () => {
  const [image, setImage] = useState();

  const handleSubmit = (e) => {
    e.preventDefault()
    let fileToUpload = image
    const formData = new FormData()
    formData.append('file', fileToUpload)
    
    fetch('/api/upload', {
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data',
          'Accept': 'multipart/form-data'
        },
        body: formData
      }).then(resp => {
        resp.json().then(data => {console.log(data)})
      })
    }

  return(
    <form onSubmit={handleSubmit} className="container mt-5 pt-5 pb-5" encType="multipart/form-data">

      <div className="form-inline justify-content-center mt-5">
        <label htmlFor="image" className="ml-sm-4 font-weight-bold mr-md-4">Image : </label>
        <div className="input-group">
          <input onChange={(e) => {setImage(e.target.files[0])}} type="file" id="image" name="file" accept="image/*" className="file-custom"/>
        </div>
      </div>

      <div className="input-group justify-content-center mt-4">
        <button type="submit" className="btn btn-md btn-primary">Upload...</button>
      </div>

    </form>
  )
}

и следующий Python - Flask код:

import os
from flask import Flask, request, render_template

app = Flask(__name__)


@app.route('/api/upload', methods=['POST'])
def handle_form():
    files = request.files
    file = files.get('file')
    """
      CODE TO HANDLE FILE
    """
    return jsonify({
        'success': True,
        'file': 'Received'
    })


@app.route("/")
def index():
    return render_template("index.html");   


if __name__ == "__main__":
    app.run(port=8080, debug=True)

Проблема в том, что когда я отправляю форму, файл не отправляется на бэкэнд.

Ответить при печати файлов и файлов из Python - Flask:

ImmutableMultiDict([])
None

Как я могу исправить эту проблему?

Обратите внимание:

Когда я использую Обычный HTML (форма, не основанная на React) Работает отлично, но при использовании формы на основе React не работает.

Answer 1

Я бы лично перешел к отправке формы другим способом. Подумайте о том, чтобы сделать это так:

<form onSubmit={handleSubmit} className="container mt-5 pt-5 pb-5" enctype="multipart/form-data">
    <div className="form-inline justify-content-center mt-5">
        <label htmlFor="image" className="ml-sm-4 font-weight-bold mr-md-4">Image :  </label>
        <div className="input-group">
            <input type="file" id="image" name="file" 
            accept="image/*" className="file-custom"/>
        </div>
    </div>

    <div className="input-group justify-content-center mt-4">
        <button type="submit" className="btn btn-md btn-primary">Upload,,,</button>
    </div>
</form>

const handleSubmit = (e) => {
    e.preventDefault()
    const formData = new FormData(e.target);
    
    const Upload = async() => {
      await fetch('/api/upload', {
        method: 'POST',
        body: formData
      }).then(resp => {
        resp.json().then(data => {console.log(data)})
      })
    }
    Upload();
  }

Таким образом, вы на самом деле все еще используете систему форм по умолчанию в браузере без необходимости изобретать какие-либо колеса, но все это по-прежнему находится в пределах реакции и обрабатывается почтовый запрос

Я искал в Google, как отправить formData с fetch api, и в одной статье предлагалось не использовать заголовок Content-Type, поэтому я убрал это.

В качестве альтернативы рассмотрите возможность использования axios:

          axios
            .post('/api/upload', formData)