Axum后端接收React上传图片无法正常显示问题求助

核心问题：前端请求头设置错误 #

你在前端请求里手动添加了Accept: application/json头，这会干扰浏览器自动生成的multipart/form-data请求格式。上传FormData时，浏览器会自动处理正确的Content-Type（包含boundary分隔符），手动设置Accept头会导致后端解析multipart数据异常，图片字节流被破坏，最终生成损坏的文件。

解决方案步骤 #

1. 修复前端请求头与FormData处理 #

移除错误的请求头设置，同时简化FormData的处理逻辑（无需重复创建实例）：

const formData = new FormData(e.target as HTMLFormElement);

const endpoint = '/api/my_endpoint';
const payload = {
   method: 'POST',
   // 移除手动设置的Headers，让浏览器自动生成正确的multipart请求头
   body: formData,
}        

2. 后端代码优化（增强稳定性） #

添加必要的错误处理，避免unwrap触发panic，同时确保目标目录存在：

use axum::extract::Multipart;
use std::path::Path;
use tokio::fs;

async fn handle_upload(mut multipart: Multipart) -> Result<(), String> {
    let mut title_one = String::new();
    let mut title_two = String::new();

    while let Some(field) = multipart.next_field().await.map_err(|e| e.to_string())? {
        let name = field.name().ok_or("字段未指定名称")?.to_string();
        let data = field.bytes().await.map_err(|e| e.to_string())?;

        match name.as_ref() {
            "title_one" => title_one = String::from_utf8(data).map_err(|e| e.to_string())?,
            "title_two" => title_two = String::from_utf8(data).map_err(|e| e.to_string())?,
            "my_image" => {
                let full_path = Path::new("image_dir").join("test.png");
                // 确保目标目录存在，避免写入失败
                if let Some(parent) = full_path.parent() {
                    fs::create_dir_all(parent).await.map_err(|e| e.to_string())?;
                }
                fs::write(full_path, data).await.map_err(|e| e.to_string())?;
            }
            _ => return Err(format!("未知字段: {}", name)),
        }
    }

    Ok(())
}

3. image crate 配套设置（若需继续使用） #

如果依然想用image crate处理图片，需要在Cargo.toml中明确添加所需图片格式的特性支持：

[dependencies]
image = { version = "0.24", features = ["png", "jpeg"] } # 根据实际需求添加格式

验证方式 #

1. 修复后上传图片，检查后端接收的data字节长度是否与原文件一致
2. 用图片查看器打开生成的文件，或在终端用file命令（Linux/macOS）验证：file image_dir/test.png，正常输出会显示PNG image data, ...类的格式描述

内容的提问来源于stack exchange，提问作者Ruster