使用multer + angular 6的“假路径”问题

Question

我花了最后3天来解决这个问题，但我还没弄明白这个问题。

Angular CLI：6.0.8

节点：8.11.2

操作系统：win32 x64

角度：6.0.6

黄梅。 1.3.1

我在使用multer工作人员的“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”文件夹后，我想在屏幕上显示我的新照片。

控制台给我这个错误：

GET不安全：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

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