将图像从Angular 5上传到Node.Js服务器

Question

我正在创建一个网站，并使用node.js服务器存储图像。 我有服务器和网站设置，但是当我发布请求时似乎没有发送图像。 服务器检测到发布请求，但未收到图像。 我是node.js和云计算的新手。 谢谢！

Angular中的发布请求：

constructor(private httpClient: HttpClient) { }
    selectedFile: File = null;
    onFileSelected(event) {
        this.selectedFile = <File>event.target.files[0];
        console.log(event);
        console.log(this.selectedFile);
    }
    onUpload() {
    const fd = new FormData();
    fd.append('image', this.selectedFile, this.selectedFile.name);
    this.httpClient.post('ip:port/header',
      {
        'message': 'Handling POST requests to /images',
        'createdImage': {
          'name': 'name',
          'size': 'size',
          'imageFile': this.selectedFile
        }
      })
      .subscribe(
        (response) => {
          console.log(response);
          console.log(fd);
        },
        (error) => {
          console.log(error, fd);
        });
    console.log(this.selectedFile);
  }
}

Node.js发布请求处理程序：

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, './uploads/');
    },
    filename: function(req, file, cb) {
        cb(null, file.originalname);
    }
});

const fileFilter = (req, file, cb) => {
    if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png'){
        cb(null, true);
    } else {
        cb(null, false);
    }
};

const upload = multer({
    storage: storage,
    limits:{
        fileFilter: fileFilter
}});


router.post('/', upload.single('imageFile'),(req, res, next) => {
    console.log(req.file);
    const image = {
        //attributes of item that server will request (more important for db
        name: req.body.name,
        size: req.body.size,
        imageFile: req.body.imageFile

    };

    res.status(201).json({
        message: 'Handling POST requests to /images,',
        createdImage: image
    });
});

Answer 1

您必须将创建的FormData对象作为POST请求的主体传递，因为您需要将图像作为多部分类型发送。

您还需要更改fd.append('imageFile', ...); 要在后端获取文件，因为此名称必须与upload.single方法的第一个参数匹配。