SvelteKit文件上传时Multer报Unexpected field错误求助

问题背景 #

同一份文件上传逻辑在ReactJS中可正常运行，但迁移到SvelteKit后持续报错。已尝试修改输入框名称、查阅官方文档及示例，仍未定位问题。使用svelte-forms-lib管理表单提交，排除该库导致问题的可能。

报错信息 #

MulterError: Unexpected field
at wrappedFileFilter (C:\Repos\backendclau\node_modules\multer\index.js:40:19)
at Multipart.<anonymous> (C:\Repos\backendclau\node_modules\multer\lib\make-middleware.js:107:7)
at Multipart.emit (node:events:513:28)
at Multipart.emit (node:domain:489:12)
at HeaderParser.cb (C:\Repos\backendclau\node_modules\busboy\lib\types\multipart.js:358:14)
at HeaderParser.push (C:\Repos\backendclau\node_modules\busboy\lib\types\multipart.js:162:20)
at SBMH.ssCb [as _cb] (C:\Repos\backendclau\node_modules\busboy\lib\types\multipart.js:394:37)
at feed (C:\Repos\backendclau\node_modules\streamsearch\lib\sbmh.js:248:10)
at SBMH.push (C:\Repos\backendclau\node_modules\streamsearch\lib\sbmh.js:104:16)
at Multipart._write (C:\Repos\backendclau\node_modules\busboy\lib\types\multipart.js:567:19)

SvelteKit 前端代码 #

import {createForm} from "svelte-forms-lib"
let files

const {form, handleChange, handleSubmit} = createForm({
    initialValues: {
      nome: "",
      categoria: "",
      descricao: "",
      dataFabricacao: "",
      tipo: "",
      valor: "",
      altura: "",
      largura: "",
      comprimento: "",
      material: "",
      imagens: [],
    },
    onSubmit: values => {
      
    if(files.length != null){
      for(let i = 0; i < files.length; i++){
        values.imagens.push(files[i])
      }
    }

    api.post('/Produto/Cadastrar', values, {
      headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
})
}
</script>

<label for="imagens">Imagens</label>
<input bind:files accept="image/png, image/jpeg" name="imagens" type="file" class="file-input file-input-bordered w-full max-w-xs" multiple/>

Node.js 后端代码 #

import {Router} from "express"
import multer from "multer";
import { ProdutoController } from "../Controller/ProdutoController";
import { storage } from "../utils/multerConfig";

const upload = multer({storage: storage})

const produtocontroller = new ProdutoController()
export const routerProduto = Router();

routerProduto.post("/Produto/Cadastrar",upload.array('imagens', 4), produtocontroller.cadastrar);

Multer 配置代码 #

import multer from "multer";
import path from 'path'

export const storage = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, path.resolve("public/uploads"));
    },
    filename: (req, file, callback) => {
        const time = new Date().getTime();

        callback(null, `${time}_${file.originalname}`)
    }
})

问题原因及解决方案 #

核心问题 #

直接将File对象塞进表单值对象，再手动设置Content-Type: multipart/form-data发送请求，会导致请求体格式不符合规范。Multer无法识别这种错误格式的文件字段，因此抛出Unexpected field错误。

修复步骤 #

1. 改用FormData构建请求体
   不要直接传递values对象，创建FormData实例逐个添加表单字段和文件：

   onSubmit: values => {
     const formData = new FormData();
     // 添加普通表单字段
     Object.keys(values).forEach(key => {
       if (key !== 'imagens') {
         formData.append(key, values[key]);
       }
     });
     // 添加文件
     if (files) {
       Array.from(files).forEach(file => {
         formData.append('imagens', file);
       });
     }
     // 发送请求，无需手动设置Content-Type
     api.post('/Produto/Cadastrar', formData);
   }
   

2. 移除手动设置的Content-Type
   手动设置multipart/form-data时，浏览器不会自动添加必要的边界分隔符（boundary），导致后端无法解析请求体。直接传递FormData，浏览器会自动生成包含边界的正确Content-Type头。

3. 简化文件绑定逻辑
   无需将文件塞进values.imagens，直接通过bind:files获取文件列表后添加到FormData即可。

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