Javascript 如何使用express nodejs上传图像文件并显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36477145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to upload image file and display using express nodejs
提问by Khushboo
I have used following code :
我使用了以下代码：
fileupload.html
文件上传.html
<html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form action="http://127.0.0.1:8081/file_upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" size="50" />
<br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
fileupload.js:
文件上传.js：
var express = require('express');
var app = express();
var fs = require("fs");
var bodyParser = require('body-parser');
var multer = require('multer');
//console.log(multer);
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));
app.get('/fileupload.html', function (req, res) {
res.sendFile( __dirname + "/" + "fileupload.html" );
})
app.post('/file_upload', function (req, res) {
console.log(req.files.file.name);
console.log(req.files.file.path);
console.log(req.files.file.type);
var file = __dirname + "/" + req.files.file.name;
fs.readFile( req.files.file.path, function (err, data) {
fs.writeFile(file, data, function (err) {
if( err ){
console.log( err );
}else{
response = {
message:'File uploaded successfully',
filename:req.files.file.name
};
}
console.log( response );
res.end( JSON.stringify( response ) );
});
});
})
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)
})
I have used these above code for file uploading But when excute using node fileupload.js in terminal i am getting type error TypeError('app.use() requires middleware functions');
我已经使用上面的这些代码上传文件但是在终端中使用 node fileupload.js 执行时，我收到类型错误 TypeError('app.use() requires middleware functions');
Can any one help to resolved this problem.
任何人都可以帮助解决这个问题。
回答by mscdex
You're trying to use multer's old API. It changed awhile back, see the documentationfor more information.
您正在尝试使用multer的旧 API。它不久前发生了变化，有关更多信息，请参阅文档。
In your particular case of uploading a single file, you would remove the app.use(multer({ ... }))line and instead use .single()and req.filelike:
在您上传单个文件的特定情况下，您将删除该app.use(multer({ ... }))行并改为使用.single()and req.filelike：
var upload = multer({ dest: '/tmp/'});
// File input field name is simply 'file'
app.post('/file_upload', upload.single('file'), function(req, res) {
var file = __dirname + '/' + req.file.filename;
fs.rename(req.file.path, file, function(err) {
if (err) {
console.log(err);
res.send(500);
} else {
res.json({
message: 'File uploaded successfully',
filename: req.file.filename
});
}
});
});
回答by Vikash Kumar
Multeradds a body object and a file or files object to the request object. The body object contains the values of the text fields of the form, the file or files object contains the files uploaded via the form.
Multer向请求对象添加一个主体对象和一个或多个文件对象。body 对象包含表单文本字段的值，文件或文件对象包含通过表单上传的文件。
Use this code, hope this will help you.
使用此代码，希望对您有所帮助。
var express = require('express');
var app = express();
var fs = require("fs");
var bodyParser = require('body-parser');
var multer = require('multer');
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
var upload = multer({ dest: '/tmp' })
app.get('/fileupload.html', function (req, res) {
res.sendFile( __dirname + "/" + "fileupload.html" );
})
app.post('/file_upload', upload.single("file"), function (req, res) {
var file = __dirname + "/" + req.file.originalname;
fs.readFile( req.file.path, function (err, data) {
fs.writeFile(file, data, function (err) {
if( err ){
console.error( err );
response = {
message: 'Sorry, file couldn\'t be uploaded.',
filename: req.file.originalname
};
}else{
response = {
message: 'File uploaded successfully',
filename: req.file.originalname
};
}
res.end( JSON.stringify( response ) );
});
});
})
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)
})
回答by Pardeep Kumar
The above solution doesn't worked for me so I have used storage method:
上述解决方案对我不起作用，所以我使用了存储方法：
var express = require('express');
var app = express();
var fs = require("fs");
var bodyParser = require('body-parser');
var multer = require('multer');
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/index.htm', function (req, res) {
res.sendFile( __dirname + "/" + "index.htm" );
})
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads/')
},
filename: function (req, file, cb) {
var ext = require('path').extname(file.originalname);
ext = ext.length>1 ? ext : "." + require('mime').extension(file.mimetype);
require('crypto').pseudoRandomBytes(16, function (err, raw) {
cb(null, (err ? undefined : raw.toString('hex') ) + ext);
});
}
});
var upload = multer({ storage: storage });
app.post('/file_upload', upload.any(), function (req, res, next) {
res.send(req.files);
})
回答by shuts13
it works for me correctly
它对我有用
var express = require('express'),
http = require('http'),
formidable = require('formidable'),
fs = require('fs'),
path = require('path');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer({ dest: '/tmp/'});
var app = express();
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
var server = app.listen(3000, function() {
console.log('leistening on port', server.address().port);
})
app.post('/upload', upload.single('file'), function(req, res) {
var file = 'uploads' + '/' + req.file.originalname;
fs.rename(req.file.path, file, function(err) {
if (err) {
res.send(500);
} else {
res.json({
message: 'File uploaded successfully',
filename: req.originalname
});
}
});
});<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<form action="http://127.0.0.1:3000/upload" enctype="multipart/form-data" method="post">
<input type="text" name="title">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>
</body>
</html>回答by ?ilvinas
It seems that it's not safe to keep original file name or extension and I found/made this code for displaying images directly everywhere by adding .jpg to your file url:
似乎保留原始文件名或扩展名是不安全的，我发现/制作了这段代码，通过将 .jpg 添加到您的文件 url 来直接在任何地方显示图像：
restapi.get('/uploads/:id', function (req, res) {
var storedMimeType = 'image/jpeg';
res.setHeader('Content-Type', storedMimeType)
fs.createReadStream(path.join('./uploads/', req.params.id).replace(/\.[^/.]+$/, "")).pipe(res)
})
