如何上传图片文件并使用express nodejs显示 [英] how to upload image file and display using express nodejs

查看:167
本文介绍了如何上传图片文件并使用express nodejs显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用了下面的代码:

fileupload.html

$ p $ < HTML>
< head>
< title>档案上传表格< / title>
< / head>
< body>
< h3>档案上载:< / h3>
选择要上传的文件:< br />
< form action =http://127.0.0.1:8081/file_uploadmethod =POSTenctype =multipart / form-data>
< input type =filename =filesize =50/>
< br />
< input type =submitvalue =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);
)b
$ b 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.ad服务器地址
var port = server.address().port
$ b console.log(http://%s:%s监听的应用程序示例,host,port )
))

我已经使用上述代码进行文件上传了但是当使用节点fileupload.js在终端我得到类型错误 TypeError('app.use()需要中间件函数');


解决方案

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



在上传单个文件的特定情况下,您将删除 app.use(multer({...}))行,而是使用< $ c $ .single()和 req.file like:

  var upload = multer({dest:'/ tmp /'}); 

//文件输入字段名称只是'文件'
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
});
}
});
});


I have used following code :

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

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

Can any one help to resolved this problem.

解决方案

You're trying to use multer's old API. It changed awhile back, see the documentation for more information.

In your particular case of uploading a single file, you would remove the app.use(multer({ ... })) line and instead use .single() and req.file like:

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

这篇关于如何上传图片文件并使用express nodejs显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆