Question

我花了最后三天的时间来解决问题，但我仍未弄清问题。

Angular CLI：6.0.8

节点：8.11.2

操作系统：win32 x64

角度：6.0.6

磨砂机。 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 });
    });
});

我在“添加子对象”组件上的代码，使用简单代码：

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 + 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的模型，因此，如果可以的话，我将不胜感激，因为我正在执行相同的任务，除了仍然收到错误：< / p>

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

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

2 个答案: