Question

我有一个简单的反应应用程序。我已将react-fine-uploader添加到其中。我有一个Flask服务器接受文件并将它们放入MongoDB数据库。服务器的代码如下所示：

from flask import Flask, render_template, request
from pymongo import MongoClient
import os
import time
from json import dumps, loads

app = Flask(__name__)


global index
map_dir = 'maps'

client = MongoClient(
    '<connection_string>')

db = client.business


@app.route('/maps', methods=['GET'])
def process():
    cursor = db.maps.find({}, {'_id': False})
    maps = {'maps': []}
    for doc in cursor:
        try:
            maps['maps'].append(doc['filename'])
        except Exception:
            pass
    return dumps(maps)


@app.route('/map/<map_name>', methods=['GET'])
def get_map(map_name):
    doc = db.maps.find_one({'filename': map_name}, {'_id': False})
    return dumps(doc)


@app.route('/uploader', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        f = request.files['file']
        parsed = loads(f.read())
        filename = ''.join(f.filename.split('.')[:-1]) + str(index) + '.json'
        parsed['filename'] = filename
        try:
            result = db.maps.insert_one(parsed)
            return 'File uploaded successfully'
        except Exception:
            return 'Error while uploading a file'


if __name__ == '__main__':
    global index
    index = len(os.listdir('maps')) + 1
    app.run(debug=True)

它适用于标准HTML input表单，并指定目标为localhost:5000/uploader。现在我希望我的fine-uploader表单也能这样做。在代码中它看起来像这样：

const uploader1 = new FineUploader({
    options: {
        request: {
            endpoint: "localhost:5000/uploader"
        },
        resume: {
            enabled: true
        },
        retry: {
            enableAuto: true,
            showButton: true
        }
    }
});

在render()方法的某个地方：<Gallery uploader={uploader1} />

现在我可以选择文件了，但是当它被选中时，表单会尝试上传它并失败。服务器正在运行，我在终端上看不到他的请求。有什么我做错了吗？

@Edit我启用了调试模式，它会将这样的内容抛出到开发控制台：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

React fine-uploader上传文件

0 个答案: