2017-09-18 3 views
0

Ich implementiere einen Datei-Upload mit Plupload im Frontend und express nodejs im Backend mit multer Middleware für Multipart/Form Upload. Es gibt derzeit kein Beispiel vorhanden, so ist dies, was ich so weit gekommen:Wie man plumpload in Expressjs mit Multer mit Chunking umgehen?

HTML-Frontend:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test</title> 
</head> 

    <ul id="filelist"></ul> 
    <br /> 

    <div id="container"> 
     <a id="browse" href="javascript:;">[Browse...]</a> 
     <a id="start-upload" href="javascript:;">[Start Upload]</a> 
     <br /> 
     <pre id="console"></pre> 
    </div> 
    <script src="/plupload/js/plupload.full.min.js"></script> 
    <script type="text/javascript"> 
     var uploader = new plupload.Uploader({ 
      browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself 
      url: '/upload' 
     }); 
     uploader.init(); 

     uploader.bind('FilesAdded', function(up, files) { 
      var html = ''; 
      plupload.each(files, function(file) { 
       html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>'; 
      }); 
      document.getElementById('filelist').innerHTML += html; 
     }); 
     uploader.bind('UploadProgress', function(up, file) { 
      document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; 
     }); 
     uploader.bind('Error', function(up, err) { 
      document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message; 
     }); 
     document.getElementById('start-upload').onclick = function() { 
      uploader.start(); 
     }; 
    </script> 
</html> 

Es im Grunde nur die Plupload Kurzanleitung: http://www.plupload.com/docs/v2/Getting-Started

Backend mit Knoten Express. Ich getrimmt meinen Code auf eine Minimum reduziert Arbeitsversion für hier den Einsatz auf SO:

const path = require('path'); 
const express = require('express'); 
var multer = require('multer'); 
var upload = multer({ dest: 'uploads/' }); 

// Create express 
const app = express(); 
app.use(express.static('public')); 
app.post('/upload', upload.array('file'), function(req, res){ 
    console.log(req.files); 
}) 
app.listen(3000, function() { 
    console.log('App running...'); 
}); 

Grundsätzlich nur einen regelmäßigen Express-App mit multer Paket und dazu dient, statische Dateien.

Frage:

Wie lade ich Dateien Plupload in dem Front-End und NodeJS (unter Verwendung von Express, multer) im Backend verwenden? Es sollte auch Chunking unterstützen.

Antwort

0

Sie können die Funktion fileFilter verwenden, um Ihre Dateien zu validieren, bevor sie hochgeladen werden. Mit dieser Funktion können Sie Dateinamen, Erweiterungen und Dateien überprüfen, die hochgeladen werden sollen und die übersprungen werden sollen.

Denn zum Beispiel Nehmen wir an, dass Sie der Benutzer nur „PDF“ Dateien hochladen möchten, können Sie einen Filter wie dieses schreiben kann,

multer({ 
    fileFilter: function (req, file, cb) { 
     if (file.mimetype !== 'application/pdf') { 
      req.fileValidationError = 'Only PDF files can be uploaded'; 
      return cb(null, false, new Error('Only PDF files can be uploaded')); 
     } 
     cb(null, true); 
    } 
}); 

Nur für den Fall, wenn der Benutzer beschränken möchten hochladen Dateien innerhalb bestimmter MB, können Sie nutzen die limits Eigenschaft machen, die als,

limits: { fileSize: the_file_size_which_you_want_to_allow } 

eingestellt werden kann und schließlich, wenn Sie ein gemeinsames Dateinamensmuster in Ihrem Zielverzeichnis haben möchten Sie (wo die Dateien hochgeladen wird) kann dienutzenfunktionieren so, (im folgenden Beispiel fügen wir einen Bindestrich und einen Zeitstempel an den Dateinamen an).

filename: function (req, file, cb) { 
    cb(null, file.fieldname + '-' + Date.now()) 
} 

UPDATE

Sie können den plupload Knotenmodul machen die Pflege der Express-Plupload Kommunikation stattfinden wird, die Sie versuchen zu klären.

Hoffe, das hilft!

+0

HI David, eine Idee, wie man "reden" zu plupload sagen? – kosinix

+0

@kosinix Yup, das kannst du leicht machen, überprüfe meine aktualisierte Antwort oben (unter der Überschrift ** Update **) –

Verwandte Themen