在 Flask 中操作和显示用户上传的图像答案

【问题标题】：Manipulating and displaying user uploaded image in Flask在 Flask 中操作和显示用户上传的图像
【发布时间】：2019-08-20 16:36:43
【问题描述】：

我正在开发一个网络应用程序，该应用程序允许用户上传他们的图像，对其进行修改，然后显示在网页上。 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

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

【问题讨论】：

标签： javascript python flask

【解决方案1】：

首先，您的视图函数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 作为锚点，但在 Flask 中您将 /modify1 列为 uri。

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

【讨论】：