อัปโหลดไฟล์ Node / Express


96

ฉันใช้โหนด v0.10.26 และ Express v4.2.0 และฉันค่อนข้างใหม่สำหรับโหนด ฉันเอาหัวโขกโต๊ะทำงานเป็นเวลาสามชั่วโมงที่ผ่านมาพยายามหาแบบฟอร์มการอัปโหลดไฟล์ที่ทำงานกับโหนด ณ จุดนี้ฉันแค่พยายามรับ req.files เพื่อไม่ให้ส่งคืนไม่ได้กำหนด มุมมองของฉันมีลักษณะเช่นนี้

<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
  <h1>{{ title }}</h1>
  <p>Welcome to {{ title }}</p>
  <form method='post' action='upload' enctype="multipart/form-data">
    <input type='file' name='fileUploaded'>
    <input type='submit'>
  </form>
</body>
</html>

นี่คือเส้นทางของฉัน

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

router.post('/upload', function(req, res){
console.log(req.files);
});

module.exports = router;

และนี่คือแอพของฉัน js

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

/// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});



module.exports = app;

ฉันเห็นที่ไหนสักแห่งที่รวมถึงmethodOverride()และbodyParser({keepExtensions:true,uploadDir:path})ควรจะช่วยได้ แต่ฉันไม่สามารถเปิดเซิร์ฟเวอร์ได้หากฉันเพิ่มบรรทัดเหล่านั้น



ฉันใช้ express 3 แทนที่จะเป็น 4 ดังนั้น api อาจมีการเปลี่ยนแปลง แต่ฉันคิดว่าคุณต้องใช้ google / bing formidableและexpress. AFAIK คุณต้องเปิดใช้งานformiableซึ่งรับผิดชอบในการจัดการกับข้อมูลฟอร์มหลายส่วนบันทึกไฟล์ในดิสก์ภายในเครื่อง (ซึ่งเป็นuploadDirวิธีการ) จากนั้นคุณสามารถใช้สิ่งที่ต้องการreq.filesอ่านและประมวลผลตรรกะทางธุรกิจของคุณ
Shaun Xu

พยายามลบ "var bodyParser = require ('body-parser');" และแทนที่จะใช้ bodyParser var ให้ใช้สิ่งนี้: app.use (express.bodyParser ()); app.use (express.methodOverride ()); ฉันไม่มีเวลาทดสอบตู้เอทีเอ็มนี้ ...
Canastro

มันล่าช้า แต่อาจเป็นประโยชน์สำหรับบางคนในอนาคต นี่คือบทช่วยสอนที่สมบูรณ์เกี่ยวกับการอัปโหลดไฟล์ node js ด้วยโปรแกรม
Jason W

สายนี้มีไว้ทำอะไร? app.use(express.static(path.join(__dirname, 'public')));
geoidesic

คำตอบ:


94

ปัญหา ExpressJS:

มิดเดิลแวร์ส่วนใหญ่ถูกลบออกจาก express 4 โปรดดูที่: http://www.github.com/senchalabs/connect#middleware สำหรับมิดเดิลแวร์หลายส่วนเช่น busboy, busboy-connect, น่าเกรงขาม, ไหล, แยกส่วนเป็นสิ่งจำเป็น

ตัวอย่างนี้ทำงานโดยใช้มิดเดิลแวร์Connect-busboy สร้าง / img และ / โฟลเดอร์สาธารณะ
ใช้โครงสร้างโฟลเดอร์:

\ server.js

\ img \ "ที่อัปโหลดสิ่งต่างๆ"

\ public \ index.html

เซิร์ฟเวอร์ JS

var express = require('express');    //Express Web Server 
var busboy = require('connect-busboy'); //middleware for form/file upload
var path = require('path');     //used for file path
var fs = require('fs-extra');       //File System - for file manipulation

var app = express();
app.use(busboy());
app.use(express.static(path.join(__dirname, 'public')));

/* ========================================================== 
Create a Route (/upload) to handle the Form submission 
(handle POST requests to /upload)
Express v4  Route definition
============================================================ */
app.route('/upload')
    .post(function (req, res, next) {

        var fstream;
        req.pipe(req.busboy);
        req.busboy.on('file', function (fieldname, file, filename) {
            console.log("Uploading: " + filename);

            //Path where image will be uploaded
            fstream = fs.createWriteStream(__dirname + '/img/' + filename);
            file.pipe(fstream);
            fstream.on('close', function () {    
                console.log("Upload Finished of " + filename);              
                res.redirect('back');           //where to go next
            });
        });
    });

var server = app.listen(3030, function() {
    console.log('Listening on port %d', server.address().port);
});

INDEX HTML

<!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>angular file upload</title>
</head>

<body>
        <form method='post' action='upload' enctype="multipart/form-data">
        <input type='file' name='fileUploaded'>
        <input type='submit'>
 </body>
</html>

ต่อไปนี้จะทำงานร่วมกับSERVER.JS ที่น่าเกรงขาม

var express = require('express');   //Express Web Server 
var bodyParser = require('body-parser'); //connects bodyParsing middleware
var formidable = require('formidable');
var path = require('path');     //used for file path
var fs =require('fs-extra');    //File System-needed for renaming file etc

var app = express();
app.use(express.static(path.join(__dirname, 'public')));

/* ========================================================== 
 bodyParser() required to allow Express to see the uploaded files
============================================================ */
app.use(bodyParser({defer: true}));
 app.route('/upload')
 .post(function (req, res, next) {

  var form = new formidable.IncomingForm();
    //Formidable uploads to operating systems tmp dir by default
    form.uploadDir = "./img";       //set upload directory
    form.keepExtensions = true;     //keep file extension

    form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        console.log("form.bytesReceived");
        //TESTING
        console.log("file size: "+JSON.stringify(files.fileUploaded.size));
        console.log("file path: "+JSON.stringify(files.fileUploaded.path));
        console.log("file name: "+JSON.stringify(files.fileUploaded.name));
        console.log("file type: "+JSON.stringify(files.fileUploaded.type));
        console.log("astModifiedDate: "+JSON.stringify(files.fileUploaded.lastModifiedDate));

        //Formidable changes the name of the uploaded file
        //Rename the file to its original name
        fs.rename(files.fileUploaded.path, './img/'+files.fileUploaded.name, function(err) {
        if (err)
            throw err;
          console.log('renamed complete');  
        });
          res.end();
    });
});
var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});

35
ดังนั้นเราจึงมีกรอบการทำงานที่เปลี่ยน API ที่สำคัญและทำให้สิ่งพื้นฐานซับซ้อนอย่างน่ากลัว และนั่นคือโมดูล NodeJS ที่ได้รับความนิยมมากที่สุด?
wortwart

19
เป็นการเปิดตัวครั้งสำคัญ อนุญาตให้ทำการเปลี่ยนแปลงในรุ่นใหญ่ตามข้อกำหนดของ semver.org
Stuart P. Bentley

6
แน่นอนว่า semver.org อนุญาตให้มีการเปลี่ยนแปลง API ในหมายเลขเวอร์ชันหลัก ๆ แต่นั่นเป็นจุดที่น่ากลัวในการพยายามทำให้ผู้ใช้ของคุณโกรธ
joonas.fi

1
ฉันดิ้นรนมาหลายวันกว่าจะอัปโหลดไฟล์เพื่อใช้งานด่วนได้ ขอบคุณ!!!
aProperFox

1
เอ้อ "bodyParser" คืออะไรและมาจากไหน? @Mick
Robin

27

อีกทางเลือกหนึ่งคือการใช้multerซึ่งใช้ busboy ภายใต้ประทุน แต่ตั้งค่าได้ง่ายกว่า

var multer = require('multer');

ใช้ Multer และกำหนดปลายทางสำหรับการอัปโหลด:

app.use(multer({dest:'./uploads/'}));

สร้างแบบฟอร์มในมุมมองของคุณenctype='multipart/form-dataจำเป็นสำหรับ Multer ในการทำงาน:

form(role="form", action="/", method="post", enctype="multipart/form-data")
    div(class="form-group")
        label Upload File
        input(type="file", name="myfile", id="myfile")

จากนั้นใน POST ของคุณคุณสามารถเข้าถึงข้อมูลเกี่ยวกับไฟล์:

app.post('/', function(req, res) {
  console.dir(req.files);
});

กวดวิชาเต็มรูปแบบเกี่ยวกับเรื่องนี้สามารถพบได้ที่นี่


4
ฉันกำลังจะย้ายออกจากฟอร์ม Multer หลังจากผิดหวังกับความunknown fieldผิดพลาด ทุกอย่างในรหัสของฉันถูกต้อง มันใช้งานได้เกือบตลอดเวลาจากนั้นก็แสดงข้อยกเว้นนี้อย่างลึกลับโดยทุกอย่างยังคงเหมือนเดิม (สภาพแวดล้อมไฟล์รหัสชื่อไฟล์)
kishu27

1
โยน TypeError ใหม่ ('app.use () ต้องการฟังก์ชันมิดเดิลแวร์');
kris

คุณอาจต้องการตั้งค่าเช่นนี้หากคุณประสบปัญหาในการส่งฟังก์ชัน Multer ไปยังapp.use `` var upload = multer ({dest: 'uploads /'}); var app = express () app.post ('/ profile', upload.single ('field-name'), function (req, res, next) {console.log (req.file);}) ``
Anibe Agamah

22

นี่คือเวอร์ชันที่เรียบง่าย ( ส่วนสำคัญ ) ของคำตอบของมิคคัลเลน- ส่วนหนึ่งเพื่อพิสูจน์ว่าไม่จำเป็นต้องซับซ้อนมากในการใช้สิ่งนี้ บางส่วนเพื่อให้เป็นข้อมูลอ้างอิงอย่างรวดเร็วสำหรับทุกคนที่ไม่สนใจอ่านหน้าและหน้าของโค้ด


คุณต้องทำให้แอปของคุณใช้connect-busboy :

var busboy = require("connect-busboy");
app.use(busboy());

สิ่งนี้จะไม่ทำอะไรจนกว่าคุณจะเริ่มทำงาน ภายในการโทรที่จัดการการอัปโหลดให้ทำดังต่อไปนี้:

app.post("/upload", function(req, res) {
    if(req.busboy) {
        req.busboy.on("file", function(fieldName, fileStream, fileName, encoding, mimeType) {
            //Handle file stream here
        });
        return req.pipe(req.busboy);
    }
    //Something went wrong -- busboy was not loaded
});

มาทำลายสิ่งนี้:

  • คุณตรวจสอบว่า req.busboyได้ตั้งค่าไว้ (มิดเดิลแวร์ถูกโหลดอย่างถูกต้อง)
  • คุณตั้งค่าไฟล์ "file"ผู้ฟังบนreq.busboy
  • คุณไปป์เนื้อหาของreqถึงreq.busboy

ภายในตัวฟังไฟล์มีสองสิ่งที่น่าสนใจ แต่สิ่งที่สำคัญจริงๆคือfileStream: นี่คือสิ่งที่อ่านได้ได้ซึ่งสามารถเขียนลงในไฟล์ได้เหมือนที่คุณทำ

Pitfall: คุณต้องจัดการ Readable นี้มิฉะนั้น Express จะไม่ตอบสนองต่อคำขอโปรดดูbusboy API ( ส่วนไฟล์ )


22

ฉันพบว่าสิ่งนี้ง่ายและมีประสิทธิภาพ:

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

// default options
app.use(fileUpload());

app.post('/upload', function(req, res) {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
  let sampleFile = req.files.sampleFile;

  // Use the mv() method to place the file somewhere on your server
  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

express-fileupload


ผู้ที่กำลังมองหาโซลูชันล่าสุดพร้อมแพ็คเกจ NPM ที่ทันสมัยควรดูที่นี่ express-fileupload ทำให้สิ่งนี้ง่ายมาก
jaredbaszler

คำตอบนี้เป็นตัวอย่างที่ให้ไว้ใน Github อย่างไรก็ตามเมื่อมองเข้าไปในไฟล์ที่เก็บคุณจะเห็นว่าsampleFile.mv...มีการเขียนบรรทัดuploadPath = __dirname + '/uploads/' + sampleFile.name;- ฉันพบว่าลิงก์ที่
BrettJ

4

ฉันจำเป็นต้องดำเนินการโดยละเอียดมากกว่าคำตอบอื่น ๆ ที่ให้ไว้ (เช่นฉันจะเขียนไฟล์ไปยังตำแหน่งที่ฉันตัดสินใจในรันไทม์ได้อย่างไร) หวังว่านี่จะเป็นประโยชน์สำหรับผู้อื่น:  

รับ Connect-busboy:

npm install connect-busboy --save

ใน server.js ของคุณให้เพิ่มบรรทัดเหล่านี้

let busboy = require('connect-busboy')

// ... 

app.use(busboy());

// ... 

app.post('/upload', function(req, res) {
    req.pipe(req.busboy);
    req.busboy.on('file', function(fieldname, file, filename) {
        var fstream = fs.createWriteStream('./images/' + filename); 
        file.pipe(fstream);
        fstream.on('close', function () {
            res.send('upload succeeded!');
        });
    });
});

สิ่งนี้ดูเหมือนจะละเว้นการจัดการข้อผิดพลาดแม้ว่า ... จะแก้ไขในถ้าฉันพบ


1

Multer เป็นมิดเดิลแวร์ node.js สำหรับจัดการข้อมูลหลายส่วน / แบบฟอร์มซึ่งส่วนใหญ่ใช้สำหรับการอัปโหลดไฟล์ เขียนไว้ด้านบนของ busboy เพื่อประสิทธิภาพสูงสุด

npm install --save multer


in app.js

    var multer  =   require('multer');
    var storage = multer.diskStorage({
      destination: function (req, file, callback) {
        callback(null, './public/uploads');
      },
      filename: function (req, file, callback) {
        console.log(file);
        callback(null, Date.now()+'-'+file.originalname)
      }
    });

    var upload = multer({storage: storage}).single('photo');

    router.route("/storedata").post(function(req, res, next){

        upload(req, res, function(err) {
          if(err) {
            console.log('Error Occured');
            return;
          }
          var userDetail = new mongoOp.User({
            'name':req.body.name,
            'email':req.body.email,
            'mobile':req.body.mobile,
            'address':req.body.address
          });

          console.log(req.file);

          res.end('Your File Uploaded');
          console.log('Photo Uploaded');

          userDetail.save(function(err,result){
          if (err) {
            return console.log(err)
          }
          console.log('saved to database') 
        })
      })

      res.redirect('/')

    });

Multer เป็นมิดเดิลแวร์ node.js สำหรับจัดการข้อมูลหลายส่วน / แบบฟอร์มซึ่งส่วนใหญ่ใช้สำหรับการอัปโหลดไฟล์ เขียนไว้ด้านบนของ busboy เพื่อประสิทธิภาพสูงสุด
vipinlalrv

เพื่อความเข้าใจที่ดีขึ้นฉันได้แก้ไขคำตอบของคุณด้วยส่วนความคิดเห็นของคุณฉันหวังว่าคุณจะไม่รังเกียจ: P
Pardeep Jain

1

นี่เป็นวิธีที่ง่ายกว่าสำหรับฉัน:

const express = require('express');
var app = express();
var fs = require('fs');

app.post('/upload', async function(req, res) {

  var file = JSON.parse(JSON.stringify(req.files))

  var file_name = file.file.name

  //if you want just the buffer format you can use it
  var buffer = new Buffer.from(file.file.data.data)

  //uncomment await if you want to do stuff after the file is created

  /*await*/
  fs.writeFile(file_name, buffer, async(err) => {

    console.log("Successfully Written to File.");


    // do what you want with the file it is in (__dirname + "/" + file_name)

    console.log("end  :  " + new Date())

    console.log(result_stt + "")

    fs.unlink(__dirname + "/" + file_name, () => {})
    res.send(result_stt)
  });


});

โอ้ว้าวเป็นการใช้งานที่น่าสนใจ มันทำงานได้ดีกับไฟล์รูปแบบต่างๆหรือไม่?
Merunas Grincalaitis

0

โดยส่วนตัว Multer ไม่ได้ผลสำหรับฉันหลังจากหลายสัปดาห์ที่พยายามทำให้สิ่งที่อัปโหลดไฟล์นี้ถูกต้อง จากนั้นฉันเปลี่ยนเป็นรูปแบบที่น่าเกรงขามและหลังจากนั้นไม่กี่วันฉันก็ทำงานได้อย่างสมบูรณ์โดยไม่มีข้อผิดพลาดไฟล์หลายไฟล์ express และ react.js แม้ว่า react จะเป็นทางเลือกก็ตาม นี่คือคำแนะนำ: https://www.youtube.com/watch?v=jtCfvuMRsxE&t=122s


0

หากคุณใช้ Node.js Express และ typescript นี่เป็นตัวอย่างการทำงานสิ่งนี้ใช้ได้กับ javascript ด้วยเพียงแค่เปลี่ยน let เป็น var และ import เพื่อรวม etc ...

ก่อนอื่นให้นำเข้าสิ่งต่อไปนี้ตรวจสอบให้แน่ใจว่าคุณติดตั้งน่ากลัวโดยเรียกใช้คำสั่งต่อไปนี้:

npm install formidable

กว่านำเข้าสิ่งต่อไปนี้:

  import * as formidable from 'formidable';
  import * as fs from 'fs';

จากนั้นฟังก์ชั่นของคุณเช่นร้อง:

    uploadFile(req, res) {
    let form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
        let oldpath = files.file.path;
        let newpath = 'C:/test/' + files.file.name;
        fs.rename(oldpath, newpath, function (err) {
            if (err) throw err;
            res.write('File uploaded and moved!');
            res.end();
        });
    });
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.