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

Question

我正在制作一个 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;

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

Answer 1

Multer returns 当您调用 multer() 函数时，您是一个中间件。

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

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

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


 console.log(req.file) 
})

现在您的路由“/add”将在 multipart/form-data.

中查找键 testImage

Answer 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) => {})

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

File uploading with Express: req.files is undefined

node.js

express

reactjs

multer

axios