在现代Web应用开发中,前后端分离架构非常流行,其中React作为前端框架和Spring Boot作为后端框架的组合尤其受欢迎。今天我们来探讨如何在这种架构下实现文件上传功能,特别是图片的上传。
背景介绍
在一个典型的React和Spring Boot项目中,用户需要上传图片到服务器端进行处理或存储。这种需求在社交媒体、用户头像上传、产品图片展示等场景中非常常见。我们将使用axios进行HTTP请求,结合Spring Boot的MultipartFile处理上传的文件。
前端实现
首先,我们需要在React组件中设置一个文件选择器和提交按钮,以允许用户选择图片并提交。
import React, { useState } from 'react'; import axios from 'axios'; function ImageUpload() { const [selectedImage, setSelectedImage] = useState(null); function handleSubmit() { const upload = { "myImage": selectedImage // 创建与后端匹配的键值对 }; axios.defaults.withCredentials = true; axios.post('http://localhost:8080/api/image/', upload, { headers: { "Content-Type"