Angular2服务器端侦听器，用于文件上传

Cristian Muscalu 发表于 Dev

克里斯蒂安·穆斯卡卢（Cristian Muscalu）

在Angular2 CLI项目中，我最终实现了Vaadin的此上传按钮。按钮UI可以工作，但是我不知道如何实际使它在任何地方上载文件。

我一直在寻找有关侦听文件上传，multer或节点服务器的Express服务器的解决方案，但我真的不知道如何编写这样的服务器，在哪里放置它，如何启动它，如何访问它，等等。认为像文件上传这样琐碎的事情应该更容易实现，但事实并非如此。

有什么简单的解决方案可以使Angular2沿按钮实际上传到某个地方，以便以后可以下载？

克里斯蒂安·穆斯卡卢（Cristian Muscalu）

在ng2-uploader存储库中找到了解决方案，并适合与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);
});