Angular2 ExpressJs - Загрузка файла на сервер

Question

Angular-2 Я пытаюсь загрузить файлы на сервер. Следующий код загружает файл на сервер,

Как я могу ссылаться на мои документы mongodb? когда файл загружен, я хочу связать его с конкретным документом.

Также как я могу предоставить ссылку в пользовательском интерфейсе для загрузки загруженного файла с сервера?

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

код создает дату загрузки папки на сервере и дамп файла с типом файла, как .file, который не является актуальным. Загружен файл jpg.

Answer 1

Я пытался сделать то же самое, и вот мое решение (не уверен, что это лучший способ сделать это),

сервер 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); 
     }); 
    } 

} 

} 

Примечания: Это использование грозных и не multer