javascript - Angular2 serversideslyssnare för filuppladdningar

I ett Angular2 CLI-projekt implementerade jag äntligen denna uppladdningsknapp från Vaadin. Knappens användargränssnitt fungerar, men jag vet inte hur jag faktiskt ska få den att ladda upp en fil någonstans.

Jag fortsätter att hitta lösningar om express-server som lyssnar efter filuppladdningar, multer eller node-server, och jag har verkligen ingen aning om hur man skriver en sådan server, var man ska placera den, hur man startar den, hur man får åtkomst till den, etc.. Jag trodde att något så trivialt som filuppladdning skulle vara lättare att uppnå, men det verkar inte vara det.

Vad är en enkel lösning att implementera tillsammans med Angular2 för att få knappen att faktiskt ladda upp filer någonstans så att jag kan ladda ner dem senare?

Svar #1

Hittade lösningen i ng2-uploader-repot och anpassade den för att fungera med Vaadin Upload.

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

Och en bonus för dem som behöver server.js att köras vid start, detta är en fantastisk lösning som är testad och fungerar.

Relaterade artiklar