使用 Express 上传文件：req.files 未定义答案

【问题标题】：File uploading with Express: req.files is undefined使用 Express 上传文件：req.files 未定义
【发布时间】：2022-02-23 14:23:16
【问题描述】：

我正在制作 pinterest 克隆，所以我需要上传图片，但我无法从前端获取文件到后端（使用 axios）这是服务器

我测试了很多东西，但我不明白缺陷在哪里。该应用程序存储照片，似乎当我想将数据获取到后端但只有文件时会出现问题，因为我可以从前端获取字符串

const express = require('express');
const app = express()
const mongoose = require('mongoose')
const cors = require('cors')
const Photo = require('./models/Photo')
const multer = require('multer')
//MiddleWare
app.use(cors())
app.use(express.json())

mongoose.connect('', () =>{
    console.log('Connected to DB..')
})

// storage 
const Storage = multer.diskStorage({
  destination: 'uploads',
  filename: (req, file,cb) =>{
    cb(null, file.originalname)
  }
})

const upload = multer({
  storage: Storage,
}).single('testImage')

app.post('/add', async(req, res) =>{


  console.log(req.files)
})

app.listen(3001, () =>{
    console.log('Listening..')
})

这是客户端

/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable react/jsx-no-comment-textnodes */
import React, { useState, useRef } from "react";
import NotificationsIcon from "@mui/icons-material/Notifications";
import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
import "./Header.css";
import axios from "axios"
const Header = ({gallery, setGallery}) => {
  const [open, setOpen] = useState(false);
const [photo, setPhoto] = useState('')
  const handleModel = (e) => {
    setOpen(!open);
  };
  const handlePhoto = (e) => {
    setPhoto(e.target.files[0])
  
}
const handleSubmit = e=>{
  e.preventDefault();
  setOpen(!open);

console.log(photo)
  axios.post('http://localhost:3001/add',{photo: photo})
  .then(res => {
     console.log(res);
  })
  .catch(err => {
     console.log(err);
  });
}
  return (
    <div className="header">
      <div className="nav">
        <img
          src="https://i.pinimg.com/originals/0d/ea/4a/0dea4ad3030467e2f65cde00935ba62b.png"
          className="logo"
        />

        <input type="text" className="search-input" placeholder="Search" />
        <NotificationsIcon color="action" fontSize="large" className="icon" />
        <AddAPhotoIcon
          color="action"
          fontSize="large"
          className="add-icon icon"
          onClick={handleModel}
        />
      </div>
      {open ? (
        <form  onSubmit={handleSubmit} className="popup" encType='multipart/form-data'>
          <input
            type="file"
            accept=".png, .jpg, .jpeg"
            filename='testImage'
            onChange={handlePhoto}

          />
          <button >Submit</button>
        </form>
      ) : (
        ""
      )}
    </div>
  );
};

export default Header;

我上传图片时服务器控制台日志未定义，但为什么？？

【问题讨论】：

标签： node.js reactjs express axios multer

【解决方案1】：

当您调用 multer() 函数时，Multer 会返回一个中间件。

所以在您的情况下，您应该将中间件添加到您的路由中。

const upload = multer({
 storage: Storage,
}).single('testImage');

app.post('/add', upload ,async(req, res) =>{


 console.log(req.file) 
})

现在您的路线“/add”将在 multipart/form-data 中查找键 testImage。

【讨论】：

【解决方案2】：

您需要将上传作为formData传递

const formData = new FormData();
formData.append('files', photo); //this matches req.files

const res = await axios.post('http://localhost:3001/add', formData, {
  headers: formData.getHeaders() //formData will set content-type etc
});

并更新路由以使用中间件

app.post('/add', upload, async(req, res) => {})

【讨论】：