FastAPI前端通过React发送图像给FastAPI后端

在本文中，我们将介绍如何使用FastAPI和React构建一个应用，实现前端通过React发送图像给FastAPI后端的功能。我们将详细讲解如何设置和配置前后端，并提供示例代码以供参考。

前端部分 – React

首先，我们需要设置React前端以便能够发送图像到FastAPI后端。我们将使用axios库来进行HTTP请求。假设我们已经创建了一个React组件，其中包含一个文件上传的表单。

首先，在React项目中安装axios库：

npm install axios

然后，我们需要创建一个表单，允许用户选择并上传图像文件。可以使用以下示例代码：

import React, { useState } from 'react';
import axios from 'axios';

const ImageUploader = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageSelect = (event) => {
    setSelectedImage(event.target.files[0]);
  };

  const handleImageUpload = async () => {
    const formData = new FormData();
    formData.append('image', selectedImage);

    try {
      await axios.post('http://your-fastapi-backend/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });

      console.log('Image uploaded successfully!');
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageSelect} />
      <button onClick={handleImageUpload}>Upload</button>
    </div>
  );
};

export default ImageUploader;

在上述代码中，我们使用useState钩子来管理用户选择的图像文件。handleImageSelect函数将更新selectedImage状态以存储所选文件。handleImageUpload函数将创建一个FormData对象，并将所选图像添加到formData中。然后，我们使用axios库发送POST请求到FastAPI后端的/upload路由，并将formData作为请求体发送。

请注意，我们需要将请求的Content-Type头设置为multipart/form-data以正确处理图像文件。上传成功后，将在控制台日志中显示成功上传的消息。

后端部分 – FastAPI

现在，我们需要创建一个FastAPI后端来接收前端发送的图像文件。我们将使用Python Pillow库来处理图像。

首先，在FastAPI项目中安装Pillow库：

pip install Pillow

然后，我们将创建一个路由来处理图像上传和保存。在FastAPI应用的主文件中，可以使用以下示例代码：

from fastapi import FastAPI, UploadFile

app = FastAPI()

@app.post('/upload')
async def upload_image(image: UploadFile):
    image_path = f'./uploaded_images/{image.filename}'
    with open(image_path, 'wb') as file:
        file.write(await image.read())

    return {'message': 'Image uploaded successfully!'}