如何上传图片文件并使用express nodejs显示

我使用了以下代码:

fileupload.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:

 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) }) 

我已经使用这些上述代码的file upload但是,当执行使用节点fileupload.js在terminal,我得到了types错误TypeError('app.use() requires middleware functions');

任何人都可以帮助解决这个问题。

你正试图使用multer的旧API。 它改变了一段时间,请参阅文档以获取更多信息。

在你上传单个文件的特殊情况下,你将删除app.use(multer({ ... }))行,改为使用.single()req.file如下所示:

 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 }); } }); }); 

Multer向请求对象添加一个body对象和一个文件或文件对象。 正文对象包含表单文本字段的值,文件或文件对象包含通过表单上传的文件。

使用这个代码,希望这会帮助你。

 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) }) 

看起来,保留原始文件名或扩展名是不安全的,我发现/使这个代码直接在你的文件url中添加.jpg来显示图像。

 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) }) 

上面的解决scheme不适合我,所以我使用了存储方法:

 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); })