Javascript 连接反应区上传器和烧瓶

我想连接我的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);

从“React”导入React；
从“react dom”导入react dom；
导入'react dropzone uploader/dist/styles.css'；
从“react Dropzone uploader”导入Dropzone；
常量图像音频视频=（）=>{
const getUploadParams=（{meta}）=>{
常量url=http://127.0.0.1:5000/sell'
返回{url，meta:{fileUrl:`${url}/${encodeURIComponent（meta.name）}`}
}
const handleChangeStatus=（{meta}，status）=>{
console.log（状态，元）
}
const handleSubmit=（文件，所有文件）=>{
log（files.map（f=>f.meta））
allFiles.forEach（f=>f.remove（））
}
返回(
（extra.reject？'Image，audio and video files only'：'Drag files'））
风格={{
dropzoneReject:{borderColor:'红色'，backgroundColor:'#DAA'}，
inputLabel：（文件，额外）=>（extra.reject？{color:'red'}:{}），
}}
/>
)
}
const rootElement=document.getElementById（“react root”）；
render（，rootElement）；

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

react dropzone uploader在上载之前执行选项请求。您只需使用模块启用此功能即可

只需使用应用程序初始化CORS模块，即可使用CORS装饰所有路线，而且应该可以正常工作

从烧瓶导入烧瓶
从LASKU cors进口cors
app=烧瓶（名称）
CORS（应用程序）

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

react dropzone uploader在上载之前执行选项请求。您只需使用模块启用此功能即可

只需使用应用程序初始化CORS模块，即可使用CORS装饰所有路线，而且应该可以正常工作

从烧瓶导入烧瓶
从LASKU cors进口cors
app=烧瓶（名称）
CORS（应用程序）