堆棧內存溢出
  簡體   English   中英

如何使用express nodejs上傳圖像文件和顯示

[英]how to upload image file and display using express nodejs

 原文  2016-04-07 13:06:18  4   5    javascript/ node.js/ file-upload

問題描述

我使用了以下代碼：

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

我已經使用上面的代碼進行文件上傳但是當在終端使用節點fileupload.js執行時我得到類型錯誤TypeError('app.use() requires middleware functions');

任何人都可以幫助解決這個問題。

5 個解決方案

解決方案1
 13 已采納  2016-04-07 13:20:18

你正試圖使用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
      });
    }
  });
});

解決方案2
 4  2016-04-07 13:21:14

Multer將一個body對象和一個或一個文件或文件對象添加到請求對象中。 body對象包含表單的文本字段的值，文件或files對象包含通過表單上傳的文件。

使用此代碼，希望這對您有所幫助。 

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

解決方案3
 1  2016-12-23 05:39:49

以上解決方案對我沒有用，所以我使用了存儲方法： 

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

解決方案4
 0  2018-06-06 11:54:13

它對我有用 

 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>

解決方案5
 -1  2017-04-10 23:53:36

保持原始文件名或擴展名似乎不安全，我發現/制作此代碼，通過將.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)
})

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用Express NodeJS Multer上傳文件？ 使用nodejs上傳文件，使用dropzone進行表達和角度 如何使用Nodejs后端將文件上傳到MySQL數據庫並顯示照片 使用Nodejs將圖像上傳到MongoDB並表達 使用帶有 nodejs 和 express 的 parse 和 back4app 上傳和檢索圖像 如何通過AngularJS通過Node.js Express將文件上傳到s3 如何從不同的上傳點在同一頁面上上傳多個文件。 使用 nodejs express-fileupload 使用javascript使用文件上傳顯示圖像 如何使用Angularjs和NodeJs在ckeditor中上傳圖像 如何使用 Nodejs 上傳帶有 json 的圖像
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM