用于file upload的Angular2服务器端侦听器

在Angular2 CLI项目中,我finnaly从Vaadin实现了这个上传button。 button用户界面的作品,但我不知道如何实际上使任何地方上传文件。

我一直在寻找解决scheme, 快速的服务器 ,侦听file upload, 多function一体机节点服务器 ,我真的不知道如何编写这样的服务器,放在哪里,如何启动它,如何访问它等。认为像file upload这样简单的事情应该更容易实现,但似乎并非如此。

什么是一个简单的解决scheme来实现边Angular2为了使button实际上传文件的地方,所以我可以下载它们以后?

在ng2-uploader repo中find了解决scheme,并且适用于Vaadin Upload 。

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

对于那些需要在启动时运行的server.js, 这是一个非常棒的解决scheme 。