multer - req.file 始终未定义

Question

我已经针对同一个问题查看了很多答案，但我还没有找到可行的解决方案。我正在尝试制作一个网络应用程序，您可以使用 express 和 multer 上传文件，但我遇到了一个问题，即没有文件被上传并且 req.file 始终未定义。

下面是我的代码

'use strict';

var express = require('express');
var path    = require('path');
var multer  = require('multer')
var upload  = multer({ dest: 'uploads/' })

var app = express();
require('dotenv').load();

app.use(express.static(path.join(__dirname, 'main')));

app.post('/upload', upload.single('upl'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
  console.log(req.file);
  res.status(204).end();
})

var port = process.env.PORT || 8080;
app.listen(port,  function () {
    console.log('Node.js listening on port ' + port + '...');
});

表格

    <form class="uploadForm" action="/upload" method="post" enctype="multipart/formdata">
        <label class="control-label">Select File</label>
        <input name="upl" id="input-1" type="file" class="file">
        <input type="submit" value="submit" />
    </form>

非常感谢您的帮助，这让我发疯了。

Answer 1

用途：

formdata.append('file',document.getElementById("input-file").files[0]);

代替：

formdata.append('file',document.getElementById("input-file").files);

这是我做错的地方。

Answer 2

如果您使用document 中提到的错误处理，那么 req.file 将是未定义的。

同时使用错误处理和检查文件是否存在的另一种方法是使用快速错误处理：

index.js

const express = require("express");
const bodyParser = require("body-parser");
const upload = require("./upload");
const multer = require("multer");

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function (req, res) {
  res.send("Hello World");
});

app.post("/upload_file", upload.single("file"), function (req, res) {
  if (!req.file) {
    throw Error("FILE_MISSING");
  } else {
    res.send("success");
  }
});

//Express Error Handling
app.use(function (err, req, res, next) {
  if (err instanceof multer.MulterError) {
    res.statusCode = 400;
    res.send(err.code);
  } else if (err) {
    if (err.message === "FILE_MISSING") {
      res.statusCode = 400;
      res.send("FILE_MISSING");
    } else {
      res.statusCode = 500;
      res.send("GENERIC_ERROR");
    }
  }
});

const server = app.listen(8081, function () {
  const port = server.address().port;

  console.log("App started at http://localhost:%s", port);
});

upload.js

const multer = require("multer");
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + "_" + file.originalname);
  },
});

const upload = multer({
  storage: storage,
  //   limits: { fileSize: 10 },
});

module.exports = upload;

Answer 3

大家好，我也浪费了 24 小时并且遇到了同样的错误，即 req.file 未定义。现在您可以参考下面的代码来检查您的解决方案。这是在 Node 和 postman 中使用 multer 上传文件的单文件演示代码。在 POSTMAN 中选择 POST 方法并选择 form-data 和 Key name 应该是 'profile'。

var express = require('express');
const app = express();
const port = 3000;
var multer = require('multer');
var upload = multer({dest:'uploads/'});
var storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, './uploads');
     },
    filename: function (req, file, cb) {
        cb(null , file.originalname);
    }
});
var upload = multer({ storage: storage })

app.post('/single', upload.single('profile'), (req, res, error) => {
    try {
      console.log(req.file);
      res.send(req.file);
    }catch(err) {
      res.send(400);
    }
  });
app.get('/', (req, res) => {
    res.send('hello Guys');
});
app.listen(port, () => {
    console.log('listening to the port: ' + port);
});

Answer 4

对我们来说，这是因为我们在 multer 之前使用 express-http-proxy 代理调用，并且我们需要使用 parseReqBody: false 选项来正确发送文件。

即。

app.post('file/upload', proxy(process.env.API_URL, {
  parseReqBody: false,
}))

Answer 5

是的，您的enctype 是错误的，这是唯一的问题。确保您更正了 enctype，否则您可能会在 req.file 或 req.files 中未定义。

Answer 6

HTML 文件，

<form class="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
    <label class="control-label">Select File</label>
    <input name="upl" id="input-1" type="file" class="file">
    <input type="submit" value="submit" />
</form>

app.js

var express=require("express");
var multer=require("multer");
var app=express();
var upload=multer({dest:"uploads/"});
app.post("/upload",upload.single("upl"),function(req,res){
console.log("Uploaded Successfull with filename : "+req.upl.filename);
});

Answer 7

我把我的（有很多我想象的而且肯定更好的）解决方案来帮助很多像我这样的人，因为我已经搜索了 1 天 ;-(

---

//JS file on node side

var express = require('express');
var fileUpload = require('express-fileupload');
var fs = require("fs");
var app = express();
console.log('étape 0');
app.use(express.static('mesStatic'));
app.use(fileUpload());
console.log('étape 1');
app.get('/indexFileUpload.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "indexFileUpload.htm" );
})
console.log('étape 2');
app.post('/file_upload', function (req, res) {

   console.log('étape 3');
   console.log('req.files:' , req.files);
   if (!req.files) {
       res.send('No files to upload.');
       return;
   }

   console.log('req.files.file.data:' , req.files.file.data);
   var bufDataFile = new Buffer(req.files.file.data, "utf-8");
   console.log('étape 3.1');
   console.log('__dirname : ' + __dirname);
   fs.writeFile(__dirname + '/file_upload/output.txt', bufDataFile,  function(err) {
      if (err) {
         return console.error(err);
      }
      else {
         console.log("Data written successfully !");
      }      
      console.log('étape 4');
      res.end('Fin OK !!!');  
   })
})
var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port);
})

Answer 8

如果是邮递员，请尝试以下操作：

1. 关闭 API 的邮递员选项卡
2. 再次打开一个新标签
3. 重建 API 请求，然后发送。

这可能会解决问题。每次重新启动服务器时，您都需要执行上述步骤以再次调用 API。 multer 的原因是将一些名为 connect.sid 的 cookie 发送回客户端，它可能需要进一步通信。使用旧 cookie 不会上传文件。

Answer 9

您的enctype 略有错误，应该是multipart/form-data 而不是multipart/formdata。