FastApi和Jquery传输图片

这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。

在FastAPI和Jquery中传输图片，你可以使用FastAPI接收图片数据，并通过Jquery发送请求。以下是一个简单的例子：

首先，使用FastAPI框架创建一个API接口来接收图片数据：




from fastapi import FastAPI, File, UploadFile
from fastapi.responses import JSONResponse
 
app = FastAPI()
 
@app.post("/uploadfile/")
async def create_upload_file(file: UploadFile = File(...)):
    contents = await file.read()
    # 这里可以添加保存文件的代码
    return JSONResponse(content={"filename": file.filename}, status_code=200)

然后，使用Jquery发送请求并附上图片文件：




<!DOCTYPE html>
<html>
<head>
    <title>FastAPI and Jquery Image Upload</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<input type="file" id="imageInput">
<button id="uploadButton">Upload</button>
 
<script>
    $(document).ready(function () {
        $('#uploadButton').click(function () {
            var formData = new FormData();
            var imageFile = $('#imageInput')[0].files[0];
            formData.append('file', imageFile);
 
            $.ajax({
                url: 'http://localhost:8000/uploadfile/',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    console.log(response.filename);
                },
                error: function () {
                    console.log('Error');
                }
            });
        });
    });
</script>
 
</body>
</html>

在这个例子中，当用户点击上传按钮时，Jquery会捕获图片文件，并通过Ajax请求发送到FastAPI服务器。服务器端的API接口会接收文件，并可以对其进行处理（例如保存到磁盘）。

确保FastAPI服务器已经运行在http://localhost:8000，并且在浏览器中打开这个HTML页面进行测试。

FastApi和Jquery传输图片

评论已关闭

推荐阅读