4.1.6 -Express - Dosya Yükleme (File Upload)

Upload işlemi için öncelikle HTML tarafında düzenleme yapmalıyız. Form method özelliği kesinlikle POST olmalı ve enctype özelliği “multipart/form-data” olarak ayarlanmalıdır.

<html>
   <head>
      <title>Dosya Yukleme Formu</title>
   </head>

   <body>
      <h3>Dosya Yukleme:</h3>
      Yuklenecek dosyayi sec: <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>

<html>

<head>

<title>Dosya Yukleme Formu</title>

</head>

<body>

<h3>Dosya Yukleme:</h3>

Yuklenecek dosyayi sec: <br />

<form action = "http://127.0.0.1:8081/file_upload" method = "POST"

enctype = "multipart/form-data">

<br />

</form>

</body>

</html>

Dosyamızın ismi index3.htm olsun. İlk sayfa yüklendiğinde bu sayfa yüklenecektir. Sayfa yüklendikten sonra dosyanın seçilip gönderilmesi için “/file_upload” bölümünün server.js dosyasına eklenip tekrar dosyanın yorumlatmasını yapın.

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.use(multer({ dest: '/tmp/'}));

app.get('/index3.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index3.htm" );
})

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:'Dosya yuklendi.',
                  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("Dinleniyor: http://%s:%s", host, port)
})

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.use(multer({ dest: '/tmp/'}));

app.get('/index3.htm', function (req, res) {

res.sendFile( __dirname + "/" + "index3.htm" );

})

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:'Dosya yuklendi.',

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("Dinleniyor: http://%s:%s", host, port)

})

Kullanılan module sayısı artmaya başladı. Yüklenen dosyayı işletim sisteminin dosya sistemine kaydetmek için “fs” kullanıldı. Dosya yüklemede kullanılan “multipart/form-data” verisini yönetmek için multer modülü eklendi. Dosya yüklemede kullanılan metotlara önceki bölümlerden tekrar inceleyebilirsiniz. Şimdi kodumuzu derleyip tarayıcımızı açıp “http://127.0.0.1:8081/index3.htm” yazıp bir dosya yüklemesi yapalım.