javascript - 连接 React Dropzone Uploader 和 Flask

Question

我想让react-dropzone-uploader与我的 Flask 后端连接，并通过表单将文件（图像）发送到后端。但是我在访问上传的图像时遇到问题。服务器响应：“400 错误请求：浏览器（或代理）发送了此服务器无法理解的请求。” 如何将上传的图片从 React 组件访问到后端？

图片上传请求的烧瓶路由：

    @app.route("/sell", methods=['GET', 'POST'])
def sell():
    if session.get("user_id") is None:
        return render_template("register.html")

    if request.method == 'POST':
        print(request)
        try:            
            brand = request.form.get("brand")
            model = request.form.get("model")
            condition = request.form.get("condition")
            gender = request.form.get("gender")
            year = request.form.get("year")
            movement = request.form.get("movement")
            price = request.form.get("price")
            description = request.form.get("description") 
            created = datetime.now().isoformat()
        
            with sql.connect("mydb.db") as con:
                cur = con.cursor()
                cur.execute("INSERT INTO items (brand, model, condition, gender, year, movement, price, description, created, item_owner) VALUES (?,?,?,?,?,?,?,?,?,?)", (brand, model, condition, gender, year, movement, price, description, created, session["user_id"]))
                file_entry = query_db('SELECT last_insert_rowid()')
                image = request.files['file']

                # flask image upload procedure from https://pythonise.com/series/learning-flask/flask-uploading-files
                if image:                
                    # Check if the image has a name
                    if image.filename == "":
                        return render_template("/sell.html", msg = "Selected image has no name")

                    if allowed_image(image.filename):
                        filename = ''.join(random.choices(string.ascii_lowercase + string.ascii_uppercase + string.digits, k=8)) + secure_filename(image.filename) 
  
                        image.save(os.path.join(app.config["IMAGE_UPLOADS"], filename))


                    cur.execute("INSERT INTO images (item, user, date, path) VALUES (?,?,?,?)", (1, session["user_id"], created, "/static/images/{}".format(filename)))

            
            con.commit()

            return render_template("watch.html", item_id = 14)
            con.close()

反应代码

    import React from "react";
import ReactDOM from "react-dom";
import 'react-dropzone-uploader/dist/styles.css';
import Dropzone from 'react-dropzone-uploader';

const ImageAudioVideo = () => {
    const getUploadParams = ({ meta }) => {
      const url = 'http://127.0.0.1:5000/sell'
      return { url, meta: { fileUrl: `${url}/${encodeURIComponent(meta.name)}` } }
    }
  
    const handleChangeStatus = ({ meta }, status) => {
      console.log(status, meta)
    }
  
    const handleSubmit = (files, allFiles) => {
      console.log(files.map(f => f.meta))
      allFiles.forEach(f => f.remove())
    }
  
    return (
      <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*,audio/*,video/*"
        inputContent={(files, extra) => (extra.reject ? 'Image, audio and video files only' : 'Drag Files')}
        styles={{
          dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
          inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
        }}
      />
    )
  }
  
<ImageAudioVideo />

const rootElement = document.getElementById("react-root");
ReactDOM.render(<ImageAudioVideo />, rootElement);

标签： javascriptpythonreactjsflask

Answer 1

您的服务器可能未配置为响应 CORS 请求。

react-dropzone-uploader 在上传之前执行一个 OPTIONS 请求。您可以使用Flask CORS模块简单地启用它。

只需使用应用程序初始化 CORS 模块即可使用 CORS 装饰所有路由，它应该可以工作。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)