从JS前端访问Flask响应

Question

我正在尝试使用JS和Flask构建异步文件上传器。到目前为止，将文件从JS发送到Flask的过程似乎工作正常，但是之后如何将所有信息从Flask返回到JS一直令人困惑。具体来说，上传完成后，我去通知JS上载文件的新URL。这是上传文件时在JS端发生的情况：

let send_one_file = function(file) {
        let filename = file.name;
        var formData = new FormData();
        var request = new XMLHttpRequest();
        formData.append('file[]', file);
        request.open('POST', '/upload');
        request.send(formData);
        request.onreadystatechange = function () {
            if (request.readyState === 4)
                if (request.status === 201) {
                 console.log(filename + " success!");
                 console.log('Response',request.response.data);
                }
                else {console.log(filename + " failed!");}
        };
    };

[C0行中，我试图从响应对象获取字符串，该对象是从Flask发送的，如下所示：

console.log('Response',request.response.data);

JS可以很好地检测到响应的状态，但是到目前为止，我还无法弄清楚如何读取其他内容。 request.response.data为“未定义”。

[请让我知道我是否要完全错了。我以前从未构建过Web应用程序。

Answer 1

这就是我最终得到的。

JS：

@app.route("/upload", methods=['POST'])
def upload_file():
    #at the moment nothing actually happens to the "uploaded" file
    files = request.files.getlist("file[]") 
    response_data = {'path': "/files/"+files[0].filename,}
    return Response(response=jsonify(response_data), status=201, mimetype='application/json')

Python：

let send_via_fetch = function (file) {
     let formData = new FormData();
     formData.append('file', file);
     fetch('/upload', {
      method: 'PUT',
      body: formData

     })
             .then(response => response.json())
             .then(result => {
              update_file_list(result['filename'], result['path'])
             })
             .catch(error => {
              console.log('Error:', error);
             })
    };