gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:06:23 24 4
gpt4 key购买 nike

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

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

最佳答案

首先,您的 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 文档。它非常详细,提供了很好的示例,并且还提供了最常见功能的教程。

关于javascript - 在 Flask 中操作和显示用户上传的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57578069/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com