Angular2 serverseitiger Listener zum Hochladen von Dateien

Question

In einem Angular2 CLI-Projekt wurde die Upload-Schaltfläche this von Vaadin implementiert. Die Schaltfläche Benutzeroberfläche funktioniert, aber ich weiß nicht, wie man es tatsächlich eine Datei hochladen überall.

Ich halte Lösungen über Express Server zu finden, die für das Hochladen von Dateien zuhört, multer oder Knotenserver, und ich habe wirklich keine Ahnung, wie man eine solche Server zu schreiben, wo es zu setzen, wie es zu starten , wie man darauf zugreift, etc .. Ich dachte, dass etwas so Triviales wie Datei-Upload leichter zu erreichen sein sollte, aber es scheint nicht zu sein.

Was ist eine einfache Lösung an Seite Angular2 zu implementieren, damit die Schaltfläche Dateien tatsächlich hochladen, damit ich sie später herunterladen kann?

Answer 1

Gefunden die Lösung in ng2-uploader Repo und angepasst, um mit Vaadin Upload zu arbeiten.

component.html

<div *ngIf="newName.valid"> 
      <vaadin-upload 
        target="http://localhost:10050/upload" 
      </vaadin-upload> 
    </div> 

server.js

'use strict'; 

const Hapi  = require('hapi'); 
const Inert  = require('inert'); 
const Md5   = require('md5'); 
const Multiparty = require('multiparty'); 
const fs   = require('fs'); 
const path  = require('path'); 
const server  = new Hapi.Server(); 

server.connection({ port: 10050, routes: { cors: true } }); 
server.register(Inert, (err) => {}); 

const upload = { 
    payload: { 
    maxBytes: 209715200, 
    output: 'stream', 
    parse: false 
    }, 
    handler: (request, reply) => { 
    const form = new Multiparty.Form(); 
    form.parse(request.payload, (err, fields, files) => { 
     if (err) { 
     return reply({status: false, msg: err}); 
     } 

     let responseData = []; 

     files.file.forEach((file) => { 
     let fileData = fs.readFileSync(file.path); 

     const originalName = file.originalFilename; 

     const generatedName = Md5(new Date().toString() + 
      originalName) + path.extname(originalName); 

     const filePath = path.resolve(__dirname, 'uploads', 
      originalName); 

     fs.writeFileSync(filePath, fileData); 
     const data = { 
      originalName: originalName, 
      generatedName: generatedName 
     }; 

     responseData.push(data); 
     }); 

     reply({status: true, data: responseData}); 
    }); 
    } 
}; 

const uploads = { 
    handler: { 
    directory: { 
     path: path.resolve(__dirname, 'uploads') 
    } 
    } 
}; 

server.route([ 
    { method: 'POST', path: '/upload',   config: upload }, 
    { method: 'GET', path: '/uploads/{path*}', config: uploads } 
]); 

server.start(() => { 
    console.log('Upload server running at', server.info.uri); 
}); 

Und ein Bonus für diejenigen, die server.js läuft beim Start this is an awesome solution getestet und arbeiten müssen.