html 建立一个录入框,点击上传,传递给fastapi服务端,不使用JavaScript
时间: 2024-09-13 16:06:16 浏览: 45
基于Javascript的干部信息录入管理系统设计源码
在HTML中建立一个录入框并通过表单上传数据到FastAPI服务端,不使用JavaScript的情况下,可以使用HTML的`<form>`标签来创建一个上传界面,然后通过表单提交数据。这里是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上传">
</form>
</body>
</html>
```
在这个例子中,用户可以通过`<input type="file">`标签选择文件,点击提交按钮后,浏览器会将文件作为表单数据上传到服务器的`/upload`路径。`enctype="multipart/form-data"`属性是必须的,因为我们需要传输文件数据。
在FastAPI服务端,你可以使用如下代码来处理上传的文件:
```python
from fastapi import FastAPI, File, UploadFile
from fastapi.responses import HTMLResponse
app = FastAPI()
@app.get("/", response_class=HTMLResponse)
def read_index():
return """
<html>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上传">
</form>
</body>
</html>
"""
@app.post("/upload")
async def create_upload_file(file: UploadFile = File(...)):
# 处理文件
return {"filename": file.filename}
```
在这个FastAPI服务端代码中,`@app.get("/")`路径返回一个HTML页面,其中包含了一个文件上传表单。当用户提交表单时,浏览器会发送一个POST请求到`/upload`路径,此时`@app.post("/upload")`函数会被调用。`file: UploadFile = File(...)`参数告诉FastAPI,请求体中应该有一个文件,我们用`UploadFile`类型来接收这个文件。
阅读全文