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

【问题标题】："fake path" issue using multer+angular 6使用 multer+angular 6 的“假路径”问题
【发布时间】：2020-12-05 03:43:36
【问题描述】：

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

Angular CLI：6.0.8

节点：8.11.2

操作系统：win32 x64

角度：6.0.6

穆尔特。 1.3.1

我在“childApi”上使用 multer 人员的代码：

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

问题是我将文件上传到“上传”文件夹后 ,我想在屏幕上显示我的新照片。

控制台给我这个错误：

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

如果有人帮忙，那就太棒了。

谢谢...

【问题讨论】：

问题解决了：

标签： javascript typescript cors angular6 multer

【解决方案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));
    };
}

【讨论】：

【解决方案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

【讨论】：