我正在尝试在 node.js 后端使用 multer 上传文件并在前端对 js 做出反应，但它在公用文件夹中的 multer 的后端不起作用答案

【问题标题】：I'm trying to upload files with multer in node.js backend and react js in frontend but it doesn't work in back side with multer in public folder我正在尝试在 node.js 后端使用 multer 上传文件并在前端对 js 做出反应，但它在公用文件夹中的 multer 的后端不起作用
【发布时间】：2022-01-20 20:50:35
【问题描述】：

带有 React.js 的前端看起来不错，我看到其他人和我做同样事情的人，但我不知道问题出在哪里！任何人都可以帮助我吗？

    const [cours, setCours] = useState([]);
    const [description, setDescription] = useState("")
    const [title, setTitle] = useState("")
    const coursHandle = (e) => { setCours([e.target.files]) }

    const onsubmit = async (e) => {
       e.preventDefault();

       const formData = new FormData();
       formData.append("description", description);
       formData.append("title", title);
       // cours.forEach((elem) => { formData.append("cours", elem) });
       formData.append("cours", cours)
       // for (let i = 0; i < cours.length; i++) {
       //     formData.append("cours", cours[i])
       // }
       await axios.post("http://localhost:5000/upload", formData)
           .then((res) => console.log("successfully file post", res)).catch((err) => 
            console.log("error with file post", err))
   }

带有 multer 的后端在这里此代码在我的 app.js 中 app.use(express.static(path.join(__dirname, 'public'))); 并且public文件夹和app.js在同一个地方

const multer = require("multer");
const path = require("path");

const MIME_TYPES = {
    "file/pdf": "pdf",
    "file/docx": "docx",
    "file/txt": "txt",
    "file/png": "png",
    "file/jpeg": "jpg",
    "file/jpg": "jpg",
}

const fileStorage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "public");
    },
    filename: (req, file, cb) => {
        const nameObject = path.parse(file.originalname);
        // const nameObject = file.originalname.split(' ').join('_');
        const extension = MIME_TYPES[file.mimetype];
        cb(null, nameObject.name.split(" ").join("_") + Date.now() + "." + extension);
    }
})

module.exports = { multerUpload: multer({ storage: fileStorage }).single("file") }

【问题讨论】：

标签： javascript node.js reactjs multer

【解决方案1】：

在最后一行

module.exports = { multerUpload: multer({ storage: fileStorage }).single("file")

single 下的参数是file，但是在你的前端表单中没有带有名称文件的输入，也许你必须将单个函数的参数从file 更改为cours

【讨论】：

@PeterSmith 感谢史密斯，但我已将文件更改为 cours，而相反的方法在这里不起作用是表单提交 <input onChange={coursHandle} name='file' type="file" className="form-control" multiple required />

【解决方案2】：

我找到了问题的答案，

formData.append("cours", cours)

我尝试发送的关键名称是“cours”和：

module.exports = { multerUpload: multer({ storage: fileStorage }).single("file")

这里单个函数的键名是“文件”！这是第一个问题，另一个是这样的：

我忘记在我的标签中添加这一行了！

encType="multipart/form-data"

最后我的 multer js 是：

const fileStorage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "public/files");
    },
    filename: (req, file, cb) => {
        console.log("filename :", file);
        const nameObject = path.parse(file.originalname);
        cb(null, nameObject.name.split(" ").join("_") + Date.now() + 
     nameObject.ext);
   }
})

module.exports = { multerUpload: multer({ storage: fileStorage }).array("cours") }

【讨论】：