Next.js 14前端图片无法传递至后端问题求助

问题根源分析 #

你的代码存在几个核心问题导致后端无法正确接收图片：

• FormData生命周期错误：在组件顶层创建FormData，组件每次渲染（比如输入框内容变化）都会重新实例化，之前通过handleImageChange添加的文件会直接丢失。
• 无效的初始化操作：提前执行formData.append('file', [])，给后端传递了空数组，干扰正常文件解析逻辑。
• 请求头设置错误：手动指定Content-Type: multipart/form-data会丢失自动生成的boundary标识，导致后端无法解析表单数据。
• 状态管理混乱：直接操作FormData而非用状态保存选中文件，加上未使用的冗余状态变量，加剧了数据丢失问题。

修复步骤及完整代码 #

'use client';
import { useState } from 'react';
import axios from 'axios';
import { useRouter } from 'next/navigation';

const Page = () => {
    console.log("Component rendered");
    const [isUploading, setIsUploading] = useState(false);
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [price, setPrice] = useState('');
    const [selectedFiles, setSelectedFiles] = useState([]); // 用状态保存选中的文件
    const router = useRouter();

    async function handleSubmit(e) {
        e.preventDefault();
        try {
            // 每次提交时重新创建FormData，确保使用最新状态
            const formData = new FormData();
            // 添加文本字段
            formData.append('title', title);
            formData.append('description', description);
            formData.append('price', price);
            // 批量添加选中的文件
            selectedFiles.forEach(file => {
                formData.append('file[]', file);
            });

            // 移除手动设置的Content-Type，让axios自动处理
            const response = await axios.post('http://localhost:8000/addProduct', formData);
            console.log('上传成功:', response.data);
        } catch (error) {
            console.log('上传失败:', error);
        }

        // 重置表单状态
        setTitle('');
        setDescription('');
        setPrice('');
        setSelectedFiles([]);
        /*setTimeout(() => {
            router.push('/products');
        }, 3000);*/
    }

    const handleImageChange = (e) => {
        const files = e.target?.files;
        if (!files || files.length === 0) {
            console.log("未选择文件");
            setSelectedFiles([]);
            return;
        }
        // 将FileList转为数组存入状态
        setSelectedFiles(Array.from(files));
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="标题"
                required
            />
            <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="描述"
                required
            />
            <input
                type="number"
                value={price}
                onChange={(e) => setPrice(e.target.value)}
                placeholder="价格"
                required
            />
            <input
                type="file"
                multiple
                onChange={handleImageChange}
                required
            />
            <button type="submit" disabled={isUploading}>
                {isUploading ? '上传中...' : '提交'}
            </button>
        </form>
    );
};

export default Page;

后端适配提示 #

如果后端使用multer处理文件，需确保字段名和前端一致：

• 前端用formData.append('file[]', file)时，后端配置应为upload.array('file[]', 10)（10为最大允许上传数量）
• 若想简化字段名，可将前端的file[]改为file，后端对应使用upload.array('file')

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