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

【问题标题】：Unexpected field error from Multer while file uploading上传文件时 Multer 出现意外的字段错误
【发布时间】：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 在客户端是大写，而在服务器上是小写。

标签： node.js reactjs express multer

【解决方案1】：

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

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

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

【讨论】：