Angular2 ExpressJs - Datei-Upload auf den Server

Question

Angular-2 Ich versuche, Dateien auf den Server hochzuladen. Der folgende Code lädt die Datei auf den Server:

Wie kann ich eine Verknüpfung zu meinen mongodb-Dokumenten erstellen? Wenn eine Datei hochgeladen wird, möchte ich sie mit einem bestimmten Dokument verknüpfen.

Auch Wie kann ich einen Link in der Benutzeroberfläche bereitstellen, um die hochgeladene Datei vom Server herunterzuladen?

Component.ts

@Component({ 
    selector: 'aptcontent', 
    template: ` 
     <div> <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..."></div> 

      <div > 
       <a (click)="upload()">Upload Docs</a> 
      </div> 

    `, 

    directives: [ROUTER_DIRECTIVES] 
}) 

export class AptContentComponent implements OnInit { 

    data: any; 
    filesToUpload: Array<File>; 

    constructor(private apartmentService: ApartmentService, private sharedService: SharedService, params: RouteParams) { 
     this.filesToUpload = []; 
    } 


    ngOnInit() {} 

    upload(){ 
     console.log('upload button clicked'); 

     this.makeFileRequest("http://localhost:3000/upload", [], this.filesToUpload).then((result) => { 
      console.log(result); 
     }, (error) => { 
      console.error(error); 
     }); 
    } 

    fileChangeEvent(fileInput: any){ 
     this.filesToUpload = <Array<File>> fileInput.target.files; 
    } 

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) { 
     return new Promise((resolve, reject) => { 
      var formData: any = new FormData(); 
      var xhr = new XMLHttpRequest(); 
      for(var i = 0; i < files.length; i++) { 
       formData.append("uploads[]", files[i], files[i].name); 
      } 
      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4) { 
        if (xhr.status == 200) { 
         resolve(JSON.parse(xhr.response)); 
        } else { 
         reject(xhr.response); 
        } 
       } 
      } 
      xhr.open("POST", url, true); 
      xhr.send(formData); 
     }); 
    } 
}  

Server.ts

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 


app.post("/upload", multer({dest: "./uploads/"}).array("uploads[]", 12), function(req, res) {});  

Der Code erstellt einen Uploads Ordner auf dem Server und Dumps die Datei mit einem Dateityp als .File, die nicht die tatsächlichen ist. JPG-Datei hochgeladen.

Answer 1

Ich habe versucht, das Gleiche zu tun und hier ist meine Lösung (nicht sicher, ob dies der beste Weg, es zu tun),

Server js:

var formidable = require('formidable'); 
var fs = require('fs'); 

app.post('/upload', function(req, res){ 

    var form = new formidable.IncomingForm(); 

    form.multiples = false; 

    form.uploadDir = path.join(__dirname, '/public/uploads'); 


    form.on('file', function(field, file) { 
    fs.rename(file.path, path.join(form.uploadDir, file.name)); 
    }); 

    form.on('error', function(err) { 
    console.log('An error has occured: \n' + err); 
    }); 

    form.on('end', function() { 
    res.end('success'); 
    }); 

    form.parse(req); 

}); 

app.component:

import { Component, OnInit, NgZone } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: 'js/app/app.component.html' 
}) 
export class AppComponent { 
    filesToUpload: Array<File>; 

    constructor() { 
     this.filesToUpload = []; 
    } 

    upload() { 
     this.makeFileRequest("http://localhost:3000/upload", [], this.filesToUpload).then((result) => { 
      console.log(result); 
     }, (error) => { 
      console.error(error); 
     }); 
    } 

    fileChangeEvent(fileInput: any){ 
     this.filesToUpload = <Array<File>> fileInput.target.files; 
    } 

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) { 
     return new Promise((resolve, reject) => { 
      var formData: any = new FormData(); 
      var xhr = new XMLHttpRequest(); 

      for(var i = 0; i < files.length; i++) { 
       formData.append("uploads[]", files[i], files[i].name); 
      } 

      xhr.open("POST", url, true); 
      xhr.send(formData); 
     }); 
    } 

} 

} 

Hinweis: Dies ist mit gewaltigen und nicht multer