Node.js 我能'；无法让express fileupload或multer正常工作。。一直显示为未定义-middlware问题？

所以我花了几个小时试图弄明白为什么express fileupload对我不起作用。。我也尝试过使用multer，但我一直将req.files设置为未定义或null。环顾四周，它似乎与我的中间件bc有关，表单是多部分数据。但我还是不知道如何让它发挥作用。如果这是个愚蠢的错误，请原谅我

express应用程序（index.js）

文件上传表单（CreateListingTest.js）

import React，{useffect，useState}来自“React”
从“react redux”导入{connect}
从“react hook form”导入{useForm}
从“../store/listings”导入{addNewListing}
从“axios”导入axios
/**
*组成部分
*/
export const CreateListing=props=>{
//常量{register，handleSubmit，errors}=useForm（）
const[file，setFile]=useState（“”）；
const[filename，setFilename]=useState（'选择文件'）
const[uploadedFile，setUploadedFile]=useState（{}）；
const onChange=（e）=>{
setFile（e.target.files[0]）；
setFilename（e.target.files[0].name）；
log（'onChange'，文件，文件名）
}
const onSubmit=async e=>{
e、 预防默认值（）；
const formData=new formData（）；
formData.append（'files'，file）；
试一试{
const res=axios.post（'/photos/upload'，formData{
标题：{
“内容类型”：“多部分/表单数据”
}
});
日志（res.data，‘res.data in test’）
const{fileName，filePath}=res.data；
setUploadedFile（{fileName，filePath}）；
}捕捉（错误）{
console.log（错误'error'）
}
}
返回(
创建新列表
{filename}
)
}
/**
*容器
*/
常量映射状态=状态=>{
返回{
//myListings:state.listings.myListings，
用户：state.user
}
}
常量映射分派=（分派，状态）=>{
返回{
addNewListing：（userId，listing）=>dispatch（addNewListing（userId，listing））
}
}
导出默认连接（mapState，mapDispatch）（CreateListing）

您是否尝试过这样的操作：

const multer=require（'multer'）const upload=multer（）。。。app.post（'/photos/upload'，upload.any（），async（req，res，next）=>{

？@Anatoly我自己实际上已经修复了它…我已经正确设置了东西，但是当我使用axios调用路由时，我忘记了使用wait…啊，哈哈

const path = require('path')
const express = require('express')
const morgan = require('morgan')
const compression = require('compression')
const session = require('express-session')
const passport = require('passport')
const SequelizeStore = require('connect-session-sequelize')(session.Store)
const db = require('./db')
const sessionStore = new SequelizeStore({db})
const PORT = process.env.PORT || 8080
const app = express()
const socketio = require('socket.io')
const fileUpload = require('express-fileupload')
var methodOverride = require('method-override');
var multipart = require('multipart');


module.exports = app

// This is a global Mocha hook, used for resource cleanup.
// Otherwise, Mocha v4+ never quits after tests.
if (process.env.NODE_ENV === 'test') {
  after('close the session store', () => sessionStore.stopExpiringSessions())
}

/**
 * In your development environment, you can keep all of your
 * app's secret API keys in a file called `secrets.js`, in your project
 * root. This file is included in the .gitignore - it will NOT be tracked
 * or show up on Github. On your production server, you can add these
 * keys as environment variables, so that they can still be read by the
 * Node process on process.env
 */
if (process.env.NODE_ENV !== 'production') require('../secrets')

// passport registration
passport.serializeUser((user, done) => done(null, user.id))

passport.deserializeUser(async (id, done) => {
  try {
    const user = await db.models.user.findByPk(id)
    done(null, user)
  } catch (err) {
    done(err)
  }
})

const createApp = () => {
  // logging middleware
  app.use(morgan('dev'))

  // body parsing middleware
  app.use(express.json())
  app.use(express.urlencoded({extended: true}))

  //file uploads
  app.use(fileUpload()); //express-fileupload
  // app.use(multer({dest:'./uploads/'})); //multer

  // compression middleware
  app.use(compression())

  // session middleware with passport
  app.use(
    session({
      secret: process.env.SESSION_SECRET || 'my best friend is Cody',
      store: sessionStore,
      resave: false,
      saveUninitialized: false
    })
  )
  app.use(passport.initialize())
  app.use(passport.session())

  // auth and api routes
  app.use('/auth', require('./auth'))
  app.use('/api', require('./api'))

  // static file-serving middleware
  app.use(express.static(path.join(__dirname, '..', 'public')))

  // any remaining requests with an extension (.js, .css, etc.) send 404
  app.use((req, res, next) => {
    if (path.extname(req.path).length) {
      const err = new Error('Not found')
      err.status = 404
      next(err)
    } else {
      next()
    }
  })

  // sends index.html
  app.use('*', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'public/index.html'))
  })

  // error handling endware
  app.use((err, req, res, next) => {
    console.error(err)
    console.error(err.stack)
    res.status(err.status || 500).send(err.message || 'Internal server error.')
  })
}





const startListening = () => {
  // start listening (and create a 'server' object representing our server)
  const server = app.listen(PORT, () =>
    console.log(`Mixing it up on port ${PORT}`)
  )

  // set up our socket control center
  const io = socketio(server)
  require('./socket')(io)
}

const syncDb = () => db.sync()

async function bootApp() {
  await sessionStore.sync()
  await syncDb()
  await createApp()
  await startListening()
}
// This evaluates as true when this file is run directly from the command line,
// i.e. when we say 'node server/index.js' (or 'nodemon server/index.js', or 'nodemon server', etc)
// It will evaluate false when this module is required by another module - for example,
// if we wanted to require our app in a test spec
if (require.main === module) {
  bootApp()
} else {
  createApp()
}

app.post('/photos/upload', async (req, res, next) => {
  try {
    console.log(req.files, 'req.files ------')
    if (req.files === null) {
      res.status(400).send("no file uploaded");
    }
    console.log(req.files, 'req.files!!!----')
    const file = req.files.file;
    file.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {
      if(err) {
        console.error(err);
        return res.status(500).send(err);
      }

      res.json('hello')
      // res.json({ fileName: file.name, filePath: `uploads/${file.name}`});
    })
    // const {name, data} = req.files.picture;
    // await knex.insert({name: name, img: data}).into('picture');
  } catch (err) {
    next(err)
  }
}
)

import React, {useEffect, useState} from 'react'
import {connect} from 'react-redux'
import {useForm} from 'react-hook-form'
import {addNewListing} from '../store/listings'
import axios from 'axios'

/**
 * COMPONENT
 */
export const CreateListing = props => {
  // const {register, handleSubmit, errors} = useForm()
  const [file, setFile] = useState('');
  const [filename, setFilename] = useState('Choose File')
  const [uploadedFile, setUploadedFile] = useState({});

  const onChange = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
    console.log('onChange' , file, filename)
  }

  const onSubmit = async e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('files', file);

    try {
      const res = axios.post('/photos/upload', formData, {
        headers: {
          'Content-Type' : 'multipart/form-data'
        }
      });

      console.log(res.data, 'res.data in test')
      const { fileName, filePath } = res.data;

      setUploadedFile({ fileName, filePath });

    } catch(err) {
      console.log(err, 'error')
    }
  }

  return (
    <div className="create-listing">
      <h2>Create New Listing</h2>
      <div className="all-listings">
        <form className="create-listing-form" onSubmit={onSubmit} action="/upload" method="POST">
            <input
              type="file"
              id="img"
              name="file"
              accept="image/*"
              onChange={onChange}
            />
            <label>{filename}</label>
          <div className="create-listing-form-section">
            <input type="submit" value="Upload"/>
          </div>
        </form>
      </div>
    </div>
  )
}

/**
 * CONTAINER
 */
const mapState = state => {
  return {
    // myListings: state.listings.myListings,
    user: state.user
  }
}

const mapDispatch = (dispatch, state) => {
  return {
    addNewListing: (userId, listing) => dispatch(addNewListing(userId, listing))
  }
}

export default connect(mapState, mapDispatch)(CreateListing)