"fake path" 使用 multer+angular 6 的问题

Question

我花了最后 3 天时间来解决这个问题，但我还没有弄清楚问题所在。

Angular CLI：6.0.8

节点：8.11.2

OS: win32 x64

Angular: 6.0.6

更多。 1.3.1

我的代码在 "childApi" 使用 multer staff :

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" ,我想在屏幕上显示我的新照片。

控制台给我这个错误：

获取unsafe:C:\fakepath\child+thinking.jpg 0 ()

如果有人帮助它会很棒。

谢谢...

Answer 1

我弄清楚该怎么做，我只是将这些句子放在我的代码中 "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));
    };
}

Answer 2

我从你的 post 了解到你在你的项目中做了一个名为 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

"fake path" 使用 multer+angular 6 的问题

"fake path" issue using multer+angular 6

javascript

cors

typescript

multer

angular6