multer - req.file 始终未定义
multer - req.file always undefined
对于同一个问题,我已经看了很多答案,但我还没有找到可行的解决方案。我正在尝试制作一个网络应用程序,您可以使用 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>
非常感谢帮助,这让我发疯。
你的enctype
有点不对,应该是multipart/form-data
而不是multipart/formdata
。
如果是邮递员,请尝试以下操作:
- 关闭 API
的邮递员选项卡
- 重新打开一个新标签页
- 重建 API 请求然后发送。
这可能会解决问题。每次重新启动服务器时,您都需要执行上述步骤以再次调用 API。原因是 multer 将一些名为 connect.sid 的 cookie 发送回客户端,在进一步的通信中可能需要这些 cookie。使用旧 cookie 将不会上传文件。
我把我的(有很多我想象的而且肯定更好)解决方案来帮助很多像我这样的人,因为我已经搜索了一整天;-(
//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);
})
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);
});
是的,您的 enctype
是错误的,这是唯一的问题。请确保您更正了您的 enctype,否则您可能会在 req.file 或 req.file 中得到未定义。
对我们来说,这是因为我们在 multer 之前使用 express-http-proxy
代理调用,我们需要使用 parseReqBody: false
选项来正确发送文件。
即
app.post('file/upload', proxy(process.env.API_URL, {
parseReqBody: false,
}))
大家好,我也浪费了 24 小时并且遇到了同样的错误,即 req.file 未定义 。现在您可以参考下面的代码来检查您的解决方案。这是单文件演示代码,用于在 Node 和邮递员中使用 multer 上传文件。在 POSTMAN Select POST 方法和 select 表单数据和密钥名称中应为 '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);
});
如果您正在使用 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;
使用:
formdata.append('file',document.getElementById("input-file").files[0]);
而不是:
formdata.append('file',document.getElementById("input-file").files);
这是我犯的错误。
对于同一个问题,我已经看了很多答案,但我还没有找到可行的解决方案。我正在尝试制作一个网络应用程序,您可以使用 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>
非常感谢帮助,这让我发疯。
你的enctype
有点不对,应该是multipart/form-data
而不是multipart/formdata
。
如果是邮递员,请尝试以下操作:
- 关闭 API 的邮递员选项卡
- 重新打开一个新标签页
- 重建 API 请求然后发送。
这可能会解决问题。每次重新启动服务器时,您都需要执行上述步骤以再次调用 API。原因是 multer 将一些名为 connect.sid 的 cookie 发送回客户端,在进一步的通信中可能需要这些 cookie。使用旧 cookie 将不会上传文件。
我把我的(有很多我想象的而且肯定更好)解决方案来帮助很多像我这样的人,因为我已经搜索了一整天;-(
//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);
})
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);
});
是的,您的 enctype
是错误的,这是唯一的问题。请确保您更正了您的 enctype,否则您可能会在 req.file 或 req.file 中得到未定义。
对我们来说,这是因为我们在 multer 之前使用 express-http-proxy
代理调用,我们需要使用 parseReqBody: false
选项来正确发送文件。
即
app.post('file/upload', proxy(process.env.API_URL, {
parseReqBody: false,
}))
大家好,我也浪费了 24 小时并且遇到了同样的错误,即 req.file 未定义 。现在您可以参考下面的代码来检查您的解决方案。这是单文件演示代码,用于在 Node 和邮递员中使用 multer 上传文件。在 POSTMAN Select POST 方法和 select 表单数据和密钥名称中应为 '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);
});
如果您正在使用 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;
使用:
formdata.append('file',document.getElementById("input-file").files[0]);
而不是:
formdata.append('file',document.getElementById("input-file").files);
这是我犯的错误。