javascript - 在 Flask 中操作和显示用户上传的图像

Question

我正在开发一个网络应用程序，该应用程序允许用户上传图像，对其进行修改，然后显示在网页上。 Dropzonejs 用于允许用户拖放以及预览图像。理想的设计是网站一侧有一个拖放区域，一旦用户单击相应的按钮，另一侧就会出现修改后的图像。我是 Flask 的新手，我不确定实现这个目标的最佳方法是什么。这是我到目前为止所拥有的。

这里是/static 文件夹中的 Javascript 函数，负责修改图像的按钮之一。

$('#modify1').click(function() {
  $.ajax({
    type: "POST",
    url: "/transpose",
    data: {input: 1},
    success: function(response) {
      alert("Successful");
      displayImage(response);
      console.log("success");//remove later
    }
});

这是 Flask 文件中的相关代码

@app.route("/modify1")
def transpose():
    input_img = request.args.get("input")

    img_mat = np.asarray(input_img, dtype=np.uint8)

    #code to modify img_mat


    img = Image.fromarray(img_mat)

    return img

这段代码无法正确运行，因为单击按钮时没有响应，但它是否在正确的轨道上？非常感谢任何有关如何构建和实现此代码的建议。

Answer 1

首先，您的 View 函数 transpose() 未正确配置为处理 POST 请求。我很惊讶地看到请求通过并且没有抛出 HTTP 405 METHOD NOT ALLOWED。

从这个开始

@app.route("/modify1", methods=["GET", "POST"])
def transpose():
    if flask.request.method == "GET":
        # GET code here
    if flask.request.method == "POST":
        # POST code here

看看这是否会改变什么，不幸的是我不熟悉任何前端后端交互，因为我只熟悉 API。不过，这应该可以帮助您入门。

还有很多更好、更干净的方法可以做到这一点，您可以引用Flask documentation获取提示。

编辑:

我注意到您将 url 列为 /transpose 并使用 modify1 作为 anchor ，但在 Flask 中您已将 /modify1 列出为是 uri。

请阅读 Flask 文档。它非常详细，提供了很好的示例，并且还提供了最常见功能的教程。