从不同文件夹中的HTML表单操作调用FastAPI Post请求无效

2024-10-02 08:22:08 发布

您现在位置：Python中文网/ 问答频道 /正文
9883 3

我想从一个公式提交中执行一个fastApi post方法，我搜索了所有关于从不同文件夹调用的web，但到目前为止没有找到任何东西。我的项目结构如下：

├── index.html
├── assets
└── backend
    ├── main.py
    └── ...

main.py Post方法：

@app.post(path="/uploadImages")
async def extract_data_from_images(images: List[UploadFile] = File(...)):
    return images[0].filename + " Hello World"

在index.html内部，表单应该触发main.py中定义的post方法。但它什么也没做

<form id="uploadform" action="/uploadImages" method="post" enctype="multipart/form-data">
    <input type="file" id="images" name="images" multiple data-max="2" accept="image/jpg, image/jpeg, image/png" >
    <input type="submit">
</form>
<textarea>Here should be data returned from FastAPI response</textarea>

我还尝试将操作路径设置为“/backend/main/uploadImages”、“/backend/uploadImages”。/backend/main.py/uploadImages”，两者都不起作用

通常，使用post方法中给出的示例代码，浏览器必须打开一个新站点，其中json原始字符串显示filename+“Hello World”，还是不显示？如果没有，如何使其在给定index.html的textarea中返回

从Fastapi文档进行的测试显示字符串，因此它不是服务器端故障

提前谢谢


Tags： 方法frompyimageformbackenddataindex
1条回答
网友
1楼 · 发布于 2024-10-02 08:22:08

您可以添加另一个端点来服务HTML页面，例如：

main.py:

import uvicorn

from datetime import datetime
from typing import List

from fastapi import FastAPI, File, Request, UploadFile
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory=".") # Change this path accordingly


@app.get("/", response_class=HTMLResponse)
def index(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})


@app.post(path="/uploadImages")
async def extract_data_from_images(images: List[UploadFile] = File(...)):
    return f"Name: {images[0].filename}, now: {datetime.now()}"


if __name__ == "__main__":
    uvicorn.run("main:app", host="localhost", port=8000, reload=True)

然后，您可以从JavaScript发出请求：

index.html:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Test</title>
</head>

<body>
  <form id="uploadform" action="/uploadImages" method="post" enctype="multipart/form-data">
    <input type="file" id="images" name="images" multiple data-max="2" accept="image/jpg, image/jpeg, image/png" >
    <input type="submit" id="submit">
  </form>

  <textarea id="box">Here should be data returned from FastAPI response</textarea>

  <script>
    const box = document.getElementById("box");

    uploadform.onsubmit = async (e) => {
      e.preventDefault();

      let res = await fetch("/uploadImages", {
        method: "POST",
        body: new FormData(uploadform),
      });

      if (res.ok) {
        let result = await res.text();
        box.innerHTML = result;
      } else {
        box.innerHTML = `Response error: ${res.status}`;
      };
    };
  </script>
</body>
</html>

相关问题 更多 >

    编程相关推荐

    热门问题