我正在使用 Node v0.10.26 和 Express v4.2.0，我对 Node 还很陌生。在过去的三个左右小时里，我一直在用头撞桌子，试图让文件上传表单与节点一起使用。此时我只是试图让 req.files 不返回未定义。我的看法是这样的
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}</p>
<form method='post' action='upload' enctype="multipart/form-data">
<input type='file' name='fileUploaded'>
<input type='submit'>
</form>
</body>
</html>
这是我的路线
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
router.post('/upload', function(req, res){
console.log(req.files);
});
module.exports = router;
这是我的app.js
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
我在某个地方看到包括
methodOverride()bodyParser({keepExtensions:true,uploadDir:path})ExpressJS 问题：
express 4 中删除了大部分中间件。 查看：http://www.github.com/senchalabs/connect#middleware 对于像busboy、busboy-connect、formidable、flow、parted这样的多部分中间件是需要的。
此示例使用 connect-busboy 中间件运行。
创建 /img 和 /public 文件夹。
使用文件夹结构：
\服务器.js
\img\“东西上传到的地方”
\公共\index.html
服务器.JS
var express = require('express'); //Express Web Server
var busboy = require('connect-busboy'); //middleware for form/file upload
var path = require('path'); //used for file path
var fs = require('fs-extra'); //File System - for file manipulation
var app = express();
app.use(busboy());
app.use(express.static(path.join(__dirname, 'public')));
/* ==========================================================
Create a Route (/upload) to handle the Form submission
(handle POST requests to /upload)
Express v4 Route definition
============================================================ */
app.route('/upload')
.post(function (req, res, next) {
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function (fieldname, file, filename) {
console.log("Uploading: " + filename);
//Path where image will be uploaded
fstream = fs.createWriteStream(__dirname + '/img/' + filename);
file.pipe(fstream);
fstream.on('close', function () {
console.log("Upload Finished of " + filename);
res.redirect('back'); //where to go next
});
});
});
var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});
索引.HTML
<!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
<meta charset="UTF-8">
<title>angular file upload</title>
</head>
<body>
<form method='post' action='upload' enctype="multipart/form-data">
<input type='file' name='fileUploaded'>
<input type='submit'>
</body>
</html>
以下将与强大的 服务器.JS
var express = require('express'); //Express Web Server
var bodyParser = require('body-parser'); //connects bodyParsing middleware
var formidable = require('formidable');
var path = require('path'); //used for file path
var fs =require('fs-extra'); //File System-needed for renaming file etc
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
/* ==========================================================
bodyParser() required to allow Express to see the uploaded files
============================================================ */
app.use(bodyParser({defer: true}));
app.route('/upload')
.post(function (req, res, next) {
var form = new formidable.IncomingForm();
//Formidable uploads to operating systems tmp dir by default
form.uploadDir = "./img"; //set upload directory
form.keepExtensions = true; //keep file extension
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received upload:\n\n');
console.log("form.bytesReceived");
//TESTING
console.log("file size: "+JSON.stringify(files.fileUploaded.size));
console.log("file path: "+JSON.stringify(files.fileUploaded.path));
console.log("file name: "+JSON.stringify(files.fileUploaded.name));
console.log("file type: "+JSON.stringify(files.fileUploaded.type));
console.log("astModifiedDate: "+JSON.stringify(files.fileUploaded.lastModifiedDate));
//Formidable changes the name of the uploaded file
//Rename the file to its original name
fs.rename(files.fileUploaded.path, './img/'+files.fileUploaded.name, function(err) {
if (err)
throw err;
console.log('renamed complete');
});
res.end();
});
});
var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});
我发现这个，简单又高效：
const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
// default options
app.use(fileUpload());
app.post('/upload', function(req, res) {
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send('No files were uploaded.');
}
// The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
let sampleFile = req.files.sampleFile;
// Use the mv() method to place the file somewhere on your server
sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
if (err)
return res.status(500).send(err);
res.send('File uploaded!');
});
});
另一种选择是使用 multer，它在底层使用 Busboy，但设置更简单。
var multer = require('multer');
var upload = multer({dest: './uploads/'});
您可以注册全局中间件并设置上传目的地：
app.use(upload.single('avatar'));
然后在任何您需要文件的 POST 中，您都可以访问数据：
app.post('/', function(req, res) {
// req.file (singular) is the file
console.dir(req.file);
});
您可能只想将其设置在特定路由上，而不是全局注册的中间件：
app.post('/', upload.single('avatar'), function(req, res){
console.dir(req.file);
});
其他中间件选项包括
fieldsarraynoneapp.post('/', uploads.array('photos', 12), function(req, res){
// req.files (plural) is an array of files
console.dir(req.files);
});
在您的视图中创建表单时，需要
enctype='multipart/form-dataform(role="form", action="/", method="post", enctype="multipart/form-data")
div(class="form-group")
label Upload File
input(type="file", name="avatar", id="avatar")
有关更多示例，请查看 github 页面。
这是 Mick Cullen 的 answer 的简化版本（要点）——部分是为了证明实现这一点不需要非常复杂；部分是为了给那些对阅读一页又一页的代码不感兴趣的人提供快速参考。
你必须让你的应用程序使用connect-busboy：
var busboy = require("connect-busboy");
app.use(busboy());
在您触发它之前，这不会执行任何操作。在处理上传的调用中，执行以下操作：
app.post("/upload", function(req, res) {
if(req.busboy) {
req.busboy.on("file", function(fieldName, fileStream, fileName, encoding, mimeType) {
//Handle file stream here
});
return req.pipe(req.busboy);
}
//Something went wrong -- busboy was not loaded
});
让我们来分解一下：
req.busboy"file"上设置了
req.busboyreqreq.busboy文件监听器内部有一些有趣的东西，但真正重要的是
fileStream陷阱：你必须处理这个可读，否则express将永远不会响应请求，请参阅busboy API（文件部分）。
这是对我有用的更简单的方法：
const express = require('express');
var app = express();
var fs = require('fs');
app.post('/upload', async function(req, res) {
var file = JSON.parse(JSON.stringify(req.files))
var file_name = file.file.name
//if you want just the buffer format you can use it
var buffer = new Buffer.from(file.file.data.data)
//uncomment await if you want to do stuff after the file is created
/*await*/
fs.writeFile(file_name, buffer, async(err) => {
console.log("Successfully Written to File.");
// do what you want with the file it is in (__dirname + "/" + file_name)
console.log("end : " + new Date())
console.log(result_stt + "")
fs.unlink(__dirname + "/" + file_name, () => {})
res.send(result_stt)
});
});
我需要比提供的其他答案更详细一些（例如，如何将文件写入我在运行时决定的位置？）。希望这对其他人有帮助：
获取连接巴士男孩：
npm install connect-busboy --save
在您的 server.js 中，添加以下行
let busboy = require('connect-busboy')
// ...
app.use(busboy());
// ...
app.post('/upload', function(req, res) {
req.pipe(req.busboy);
req.busboy.on('file', function(fieldname, file, filename) {
var fstream = fs.createWriteStream('./images/' + filename);
file.pipe(fstream);
fstream.on('close', function () {
res.send('upload succeeded!');
});
});
});
这似乎省略了错误处理...如果我找到它，将对其进行编辑。
在 vanila 节点中，我解决了一些问题。只是一个快速上传服务器。不是花哨的快递东西。可能不是提问者想要的。
const fs = require('fs'),
http = require('http'),
port = process.env.PORT || 9000,
host = process.env.HOST || '127.0.0.1';
//tested on node=v10.19.0, export HOST="192.168.0.103"
http.createServer(function(req, res) {
// Check if form is submitted and save its content
if (req.method == "POST") try {
store_file(req)
// This is here incase any errors occur
} catch (err) {
res.writeHead(404);
res.end('Server Borked');
return;
}
// respond with a simple html form so they can post more data
res.writeHead(200, {"content-type":"text/html; charset=utf-8"});
res.end(`
<form method="post" enctype="multipart/form-data">
<input type="file" name="fileUpload">
<input type="submit" value="Upload">
</form>`);
}).listen(port, host, () => console.dir(`Serving at http://${host}:${port}`));
function store_file(req) {
// Generate temporary file name
var temp = 'temp' + Math.floor(Math.random() * 10);
// This opens up the writeable stream to temporary file
var writeStream = fs.createWriteStream(temp);
// This pipes the POST data to the file
req.pipe(writeStream);
// After the temporary file is creates, create real file
writeStream.on('finish', () => {
reader = fs.readFileSync(temp);
filename = reader.slice(reader.indexOf("filename=\"") + "filename=\"".length, reader.indexOf('"\r\nContent-Type'));
hash = reader.slice(0,reader.indexOf('\r\n'));
content = reader.slice(reader.indexOf('\r\n\r\n') + '\r\n\r\n'.length, reader.lastIndexOf(Buffer.from('\r\n') + hash));
// After real file is created, delete temporary file
fs.writeFileSync(filename.toString(), content);
fs.unlinkSync(temp);
});
}
Multer是一个处理multipart/form-data的node.js中间件，主要用于上传文件。它写在 Busboy 的顶部，以实现最大效率。
npm install --save multer
in app.js
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, './public/uploads');
},
filename: function (req, file, callback) {
console.log(file);
callback(null, Date.now()+'-'+file.originalname)
}
});
var upload = multer({storage: storage}).single('photo');
router.route("/storedata").post(function(req, res, next){
upload(req, res, function(err) {
if(err) {
console.log('Error Occured');
return;
}
var userDetail = new mongoOp.User({
'name':req.body.name,
'email':req.body.email,
'mobile':req.body.mobile,
'address':req.body.address
});
console.log(req.file);
res.end('Your File Uploaded');
console.log('Photo Uploaded');
userDetail.save(function(err,result){
if (err) {
return console.log(err)
}
console.log('saved to database')
})
})
res.redirect('/')
});
const http = require('http');
const fs = require('fs');
// https://www.npmjs.com/package/formidable
const formidable = require('formidable');
// https://stackoverflow.com/questions/31317007/get-full-file-path-in-node-js
const path = require('path');
router.post('/upload', (req, res) => {
console.log(req.files);
let oldpath = req.files.fileUploaded.path;
// https://stackoverflow.com/questions/31317007/get-full-file-path-in-node-js
let newpath = path.resolve( `./${req.files.fileUploaded.name}` );
// copy
// https://stackoverflow.com/questions/43206198/what-does-the-exdev-cross-device-link-not-permitted-error-mean
fs.copyFile( oldpath, newpath, (err) => {
if (err) throw err;
// delete
fs.unlink( oldpath, (err) => {
if (err) throw err;
console.log('Success uploaded")
} );
} );
});
我个人在尝试正确上传文件数周后，multer 对我不起作用。然后我切换到强大的，几天后我让它完美工作，没有任何错误，多个文件，express和react.js，即使react是可选的。这是指南：https://www.youtube.com/watch?v=jtCfvuMRsxE&t=122s
如果您使用 Node.js Express 和 Typescript，这里是一个工作示例，这也适用于 javascript，只需将 let 更改为 var 并将导入更改为 include 等...
首先导入以下内容，确保通过运行以下命令安装 fordable：
npm install formidable
导入以下内容：
import * as formidable from 'formidable';
import * as fs from 'fs';
然后你的功能如下：
uploadFile(req, res) {
let form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
let oldpath = files.file.path;
let newpath = 'C:/test/' + files.file.name;
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
}
const 文件 = require("../models/file"); const 路径 = require('路径');
exports.localFileUpload = async (req, res) => {
try {
let sampleFile = req.files.sampleFile;
console.log("File uploaded:", sampleFile);
let uploadPath = path.join(__dirname, "/files", Date.now() + "_" + sampleFile.name);
console.log("Upload path:", uploadPath);
sampleFile.mv(uploadPath, function(err) {
if (err) {
console.log(err);
return res.status(500).json({
success: false,
});
}
});
return res.json({
success: true,
message: "File uploaded successfully"
});
} catch (error) {
console.error(error);
res.status(500).send({
success: false,
message: 'Server Error',
});
}
}
1.使用__dirname、目录/files以及包含当前时间戳和原始文件名的唯一文件名设置上传路径。 2.使用mv方法将上传的文件移动到上传路径。记录错误并在失败时返回 500 状态和 JSON 响应。