MEAN 应用程序：无法在后端接收图像，上传失败

Question

所以我正在尝试将图像上传到我的 node.js 服务器。在我的组件中，我选择了我要上传的图像，将其发送到我的服务，然后将其发送到服务器。我做了一些 console.logs 检查我是否收到了文件。

我不确定我是否需要 req.body 或 req.files，所以我都做了。 req.body returns 一个空对象和 req.files returns 未定义 。有谁知道我做错了什么？我认为这与请求选项有关。

我要上传的文件是png文件。

这是控制台的样子（来自下面 userService 文件的 console.logs 的结果

用户服务文件：这里我用上面控制台的结果做了一些console.logs。我想我需要这里的特殊选项来发出请求，但我不知道是哪些选项。

postFile(fileToUpload: File, userId) {
        console.log(fileToUpload);
        const formData: FormData = new FormData();
        formData.append('fileKey', fileToUpload, fileToUpload.name);
        console.log(formData);
        return this.http.post("http://localhost:3200/user/uploadProfilePicture/" + userId, formData, )
            .map(() => { return true; })
            .catch((e) => this.handleError(e));
    }

node.js 后端：只是一些 console.logs 检查文件是否到达后端，而它没有

router.post('/uploadProfilePicture/:userId', function(req, res){
    console.log('entered');
    console.log(req.body);
    console.log(req.files);

    res.status(200).json({
        msg: "sup mognol"
    })
});

后台结果console.logs

进入， {}, 未定义

Answer 1

由于您将文件作为 formData 发送，因此您需要使用节点中间件来处理多部分表单数据。

Busboy or Multer都是不错的选择

你可以像这样使用 multer:

var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file 
  // req.body will hold the text fields, if there were any 
})

MEAN 应用程序：无法在后端接收图像，上传失败

MEAN app: Can't receive image on back end, upload fails

javascript

node.js

mean-stack

angular