проблема "поддельного пути", используя multer + angular 6 - PullRequest
0 голосов
/ 30 июня 2018

Я потратил последние 3 дня, чтобы решить проблему, но пока не выяснил проблему.

Угловой CLI: 6,0,8

Узел: 8.11.2

ОС: win32 x64

Угловой: 6.0.6

multer. 1.3.1

мой код в "childApi" с использованием персонала сотрудников:

var store = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '.' + file.originalname);
    }
});

var upload = multer({ storage: store , }).single('file');

router.post('/upload', function (req, res, next) {
    upload(req, res, function (err) {
        if (err) {
            return console.log ('not working well')
        }
        //do all database record saving activity
        return res.json({ originalname: req.file.originalname, uploadname: req.file.filename });
    });
});

мой код в компоненте "add-child" с использованием простого кода:

import { Component, OnInit, Inject } from '@angular/core';

import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Child } from '../../models/child';
import { ChildService } from '../../services/child.service';
import {FileUploader } from 'ng2-file-upload';

const uri = 'http://localhost:3000/childApi/upload';


@Component({
  selector: 'app-add-child',
  templateUrl: './add-child.component.html',
  styleUrls: ['./add-child.component.css']
})

export class AddChildComponent implements OnInit {
    newChild = new Child;
    uploader: FileUploader = new FileUploader({ url: uri });
    attachmentList: any = [];


  constructor(private childService: ChildService, 
    private route: ActivatedRoute, 
    private router: Router, 
    public dialogRef: MatDialogRef<AddChildComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { 


      this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
          this.attachmentList.push(JSON.parse(response));
      };
    }

Проблема в том, что после загрузки файла в папку «uploads» Я хочу вывести свою новую фотографию на экран.

Консоль выдаёт мне эту ошибку:

ПОЛУЧИТЬ небезопасно: C: \ fakepath \ child + think.jpg 0 ()

Если кто-то поможет, это будет удивительно.

Спасибо ...

Ответы [ 2 ]

0 голосов
/ 29 марта 2019

Как я понял из вашего поста, в вашем проекте есть модель с именем child, поэтому, если у вас есть возможность, я могу взглянуть на нее, я буду благодарен, потому что я выполняю ту же задачу, но все еще получаю сообщение об ошибке:

Access to XMLHttpRequest at 'http://localhost:4000/file/upload' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
core.js:1449 ERROR SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at FileUploader.UploadFileComponent.uploader.onCompleteItem (upload-file.component.ts:27)
    at FileUploader.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader._onCompleteItem (file-uploader.class.js:199)
    at XMLHttpRequest.xhr.onerror [as __zone_symbol__ON_PROPERTYerror] (file-uploader.class.js:268)`
javascript html typescript angular6 multer
0 голосов
/ 08 августа 2018

Я выясняю, что делать, я просто помещаю эти предложения в свой код в компоненте "add-child", используя:

this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
        this.newChild.user_img = JSON.parse(response).uploadname;
        this.attachmentList.push(JSON.parse(response));
    };
}
...