上传文件时 Multer 出现意外的字段错误

Posted 2023-02-22

【中文标题】上传文件时 Multer 出现意外的字段错误

【英文标题】：Unexpected field error from Multer while file uploading

【发布时间】：2021-08-15 01:23:09

【问题描述】：

您好，我想创建一个带有 react 和 express 的文件上传 API。所以，我用了集合。但是当我从客户端发送到轴请求时，我从服务器收到错误。

错误：

MulterError：意外字段

我的 Express 服务器代码是这样剪断的：

const storage = multer.diskStorage(
    destination : '/',
    filename(req,file,cb)
        const newFileName = `$uuid()-$file.originalname`
        cb(null,newFileName);
    
)

const uploadVideoFile = multer(
    storage : storage
).single("videofile");

app.post('/upload', uploadVideoFile, (req,res)=>
    if(req.file)
        const filename = req.file.filename;
        const title , description = req.body;

        open(oAuth.generateAuthUrl(
            access_type : 'offline',
            scope : 'https://googleapis.com/auth/youtube.upload',
            state : JSON.stringify(
                filename, title, description
            )
        ))
    
)

我的反应客户是这样的：

    const[form,setForm] = React.useState(
        title : "",
        description : "",
        file : null
    )

    function handleChange(event)
        const inputValue = event.target.name === "file" ? event.target.files[0] : event.target.value;

        setForm(
            ...form,
            [event.target.name] : inputValue
        )
    

    function handleSubmit(event)
        event.preventDefault();
        
        const videoData = new FormData();
        videoData.append("videoFile", form.file);
        videoData.append("title", form.title);
        videoData.append("description", form.description);

        axios.post('http://localhost:3000/upload', videoData).then(response=>
            console.log(response.data)
        )
    

    return (
    <div>
        <h1>Youtube Upload Service</h1>
        <form onSubmit=handleSubmit>
            <div>
                <input onChange=handleChange type="text" name="title" autoComplete="off" placeholder="Title"/>
            </div>
            <div>
                <textarea onChange=handleChange type="text" name="description" autoComplete="off" placeholder="Description"/>
            </div>
            <div>
                <input onChange=handleChange accept="video/mp4" type="file" name="file" placeholder="Video File"/>
            </div>
            <button type="submit">Upload Video</button>
        </form>
    </div>
        )

为什么我会收到此错误？我该如何解决这个问题？

【问题讨论】：

这可能是由于大小写不匹配 - videofile 的 f 在客户端是大写，而在服务器上是小写。

【参考方案1】：

当 Multer 看到一个文件时，它会检查文件输入的名称是否与您配置的完全匹配匹配。它也区分大小写。

您已将 Multer 配置为接受名为“videofile”的单个文件输入：.single("videofile")。然而，在前端，您将其命名为“videoFile”（大写 F）：videoData.append("videoFile", form.file);。由于 "videofile" !== "videoFile"，Multer 引发了意外的字段错误。

重命名两者中的任何一个以匹配另一个应该可以解决您的问题。要了解 Multer 的工作原理以及将来如何避免此错误，我建议阅读这篇文章：Fix "Unexpected field" Error From Multer