FastAPI：FastAPI React前端向FastAPI后端发送图像

在本文中，我们将介绍如何使用FastAPI框架搭建React前端和FastAPI后端实现图像传输功能。FastAPI是一个高性能的web框架，而React是一个流行的JavaScript库，用于构建用户界面。通过结合两者，我们可以轻松地实现前后端之间的数据传输，并在前端页面上显示上传的图像。

阅读更多：FastAPI 教程

前端处理

首先，让我们从前端开始。我们将使用React创建一个简单的界面，以便用户可以选择并上传图像。我们可以使用<input>元素来创建一个文件输入框，然后通过监听onChange事件获取用户选择的文件。

import React, { useState } from "react";

function App() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileUpload = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    if (selectedFile) {
      // 在此处将图像发送到后端API
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileUpload} />
        <button type="submit">上传</button>
      </form>
    </div>
  );
}

export default App;

在上面的代码中，我们使用了React的useState钩子来跟踪用户选择的文件。在handleFileUpload函数中，我们将用户选择的文件存储到selectedFile状态中。在handleSubmit函数中，我们监听表单的提交事件，并在表单提交时执行相应的操作，例如将图像发送到后端API。

后端处理

现在，让我们转向FastAPI后端。我们将创建一个路由来接收前端发送的图像，并处理它。假设我们的图像传输API位于/upload路径下，我们可以按照以下方式编写代码：

from fastapi import FastAPI, UploadFile, File

app = FastAPI()

@app.post("/upload")
async def upload_image(image: UploadFile = File(...)):
    contents = await image.read()  # 读取图像的内容
    # 在此处处理图像，例如保存到磁盘或进行进一步的分析
    return {"filename": image.filename}  # 返回响应

在上面的代码中，我们使用FastAPI的UploadFile和File类来接收前端发送的图像文件。UploadFile是FastAPI提供的一个文件类型，用于处理上传的文件。通过File(...)，我们指定了图像是必需的，如果未上传图像将会返回错误。

在upload_image函数中，我们使用await image.read()获取图像内容。然后，我们可以在此处对图像进行各种操作，例如保存到磁盘或进行图像处理。在示例中，我们只是返回了一个包含文件名的JSON响应。

前后端交互

现在，我们已经在前端和后端分别处理了图像的上传和接收。接下来，我们需要确保前后端能够进行交互，并成功将图像从前端发送到后端。

在前端中，我们可以使用fetch API来发送图像。我们需要创建一个FormData对象，并将选定的图像添加到该对象中。然后，我们可以将该对象作为POST请求的主体发送给FastAPI后端。

const handleSubmit = async (event) => {
  event.preventDefault();

  if (selectedFile) {
    const formData = new FormData();
    formData.append("image", selectedFile);

    await fetch("/upload", {
      method: "POST",
      body: formData,
    });
  }
};

在上面的代码中，我们使用fetch函数发送POST请求到/upload路径，并将FormData对象作为请求的主体。在FormData对象中，我们使用append方法将选定的图像添加到其中，并将其命名为image。

这样，我们就成功发送了图像到FastAPI后端。

总结

在本文中，我们介绍了如何使用FastAPI框架搭建React前端和FastAPI后端实现图像传输功能。我们通过在前端中创建文件输入框和使用React的useState钩子来跟踪选择的文件。然后，我们使用fetch API将选定的图像发送到FastAPI后端，后端使用FastAPI的UploadFile和File类接收图像并进行处理。通过组合使用FastAPI和React，我们可以轻松实现前后端之间的图像传输，并进行进一步的处理或分析。

希望本文能够帮助你理解如何使用FastAPI和React在前后端之间发送图像数据。开始使用FastAPI和React构建强大且高效的应用程序吧！