multer - req.file 始终未定义

Posted

技术标签:

【中文标题】multer - req.file 始终未定义【英文标题】:multer - req.file always undefined 【发布时间】:2016-06-21 11:17:54 【问题描述】:

我已经针对同一个问题查看了很多答案,但我还没有找到可行的解决方案。我正在尝试制作一个网络应用程序,您可以使用 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>

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

【问题讨论】:

【参考方案1】:

用途:

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

代替:

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

这是我做错的地方。

【讨论】:

您好,这里有一个建议:您可以使用代码围栏来突出显示代码以使其更好地阅读【参考方案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;

【讨论】:

【参考方案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);
);

【讨论】:

【参考方案4】:

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

即。

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

【讨论】:

【参考方案5】:

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

【讨论】:

【参考方案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);
);

【讨论】:

【参考方案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);
)

【讨论】:

【参考方案8】:

如果是邮递员,请尝试以下操作:

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

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

【讨论】:

如果您使用 POST 方法打开邮递员并且某些 x-www-form-urlencoded 更改表单数据不会发送 multipart/form-data 直到您关闭选项卡并打开一个新选项卡 +1 这个答案非常有价值。谢谢你。打开问题仅供参考github.com/postmanlabs/postman-app-support/issues/2602 非常感谢!我正在撕扯我的头发,想知道为什么这不起作用!【参考方案9】:

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

【讨论】:

您遇到这个问题了吗? ***.com/questions/49544671/… 我在 multipart/form-data 上苦苦挣扎,但出于不同的原因……Multer 只接受作为 multipart/form-data 的 Content-Type,但我的客户有这个权利,但它仍然没有t 工作......在我的情况下,Multer 无法解析客户端(Java 服务器)设置的请求正文中的多部分表单数据/边界。我的解决方案是使用 wireshark 并检查请求正文。我将结果与 Postman 创建的请求进行了比较……我需要调整一些 CRLF,并且无论出于何种原因,Multer 都不接受正在使用的边界。我使用了邮递员生成的边界,然后它工作了......

以上是关于multer - req.file 始终未定义的主要内容,如果未能解决你的问题,请参考以下文章

尽管创建了文件对象,但 Multer req.file 始终未定义

Multer 返回 req.file 未定义

req.file.stream 未定义

Multer - 无法读取未定义的属性“缓冲区”

Express multer 在 req.file 上返回 undefined

Req.file 在尝试使用 multer 和 cloudinary 上传图片时返回 [object, object]