将图像从 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();
  }

这样，您实际上仍在使用浏览器默认的表单系统，而无需重新发明任何轮子，但它仍然在 react 中并由发布请求处理

我在 Google 上搜索了如何使用 fetch api 提交 formData，一篇文章建议不要使用 Content-Type 标头，因此我将其删除。

或者，考虑使用axios：

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