Я загрузил свои файлы из моего внешнего интерфейса с помощью angular 6 и хочу отправить его на свой внутренний сервер в папку в моем проекте - PullRequest
Новая
       8

Я загрузил свои файлы из моего внешнего интерфейса с помощью angular 6 и хочу отправить его на свой внутренний сервер в папку в моем проекте

0 голосов
/ 23 октября 2018

У меня есть приложение с внешним интерфейсом в angular 6 и внутренним узлом с node.js

Я сделал загрузку своих файлов и после этого я отправил их на свой сервер, но мои файлы не сделалисохранить в моей папке

Мне нужно загрузить много файлов, а не только один, и отправить их в папку '.. / angular-src / src / assets / img /'

Если кто-то может помочь мне найти решение!Спасибо

upload.components.html 

    <input type="file" (change)="fileChangeEvent($event)" 
            placeholder="Upload file..." />
    <button type="button" (click)="upload()">Upload</button>*

upload.components.ts 

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { MatDialogRef } from '@angular/material';
    import { UploadService } from '../../services/upload.service';
    import { forkJoin } from 'rxjs/observable/forkJoin';
    //import { FlashMessagesService } from 'angular2-flash-messages';

    const url = 'http://localhost:8080/upload';
    @Component({
      selector: 'app-upload',
      templateUrl: './upload.component.html',
      styleUrls: ['./upload.component.scss']
    })
    export class UploadComponent {

        filesToUpload: Array<File>;
        constructor() {
            this.filesToUpload = [];    
        }


        fileChangeEvent(fileInput: any){
               this.filesToUpload = <Array<File>> fileInput.target.files;
        }
        upload():any {
            this.makeFileRequest(url, [], this.filesToUpload).then((result) => {
                console.log(result);
            }, (error) => {
                console.error(error);
            });
       return true;
        }

        makeFileRequest(url: string, params: Array<string>, files: Array<File>):any {
            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);
                        }
                    }
                }
                console.log(formData);
                xhr.open("POST", url, true);
                xhr.send(formData);
            });
        }

upload.js (мой роутер) 

const IncomingForm = require('formidable').IncomingForm;
const log = require('../log');
var multer=require ('multer');
const fs = require('fs-extra');
const util = require('util');
const http = require('http');
const express = require('express');
const router = express.Router();

const DIR = '../angular-src/src/assets/img/'; 

router.post('/', multer({dest: DIR}).array("uploads[]", 12), function(req, res){
    res.send(req.files);
});
module.exports = router;

app.js 

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const logger = require('morgan');
const cors = require('cors');
const passport = require('passport');
const errorMiddleware = require('./middleware/error');
const config = require('./config');

const uploadRoutes = require('./routes/upload');                                                      

// initialize the app
const app = express();

// middleware
app.use(cors('http://localhost:4200/'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// static folder
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, '/angular-src/src/assets/img')));
app.use(`${config.root}/upload`, uploadRoutes);                             


module.exports = app;

Это то, что я получаю с сервера

...