node.js - 从 Angular 发布到 Node。在 Node 上获取空体

Question

我将 Angular 中的两个字段发布到 NodeJs 端点。

我通常在 body 上发布，在 Node 上一切都很完美，但是这次，我必须发布一个表单来上传文件。

所以这是我发布表单数据的代码( Angular 方面):

var APIURL = sessionStorage.getItem('endPoint') + "profile/updateeocoverage"; 
let formData = new FormData();
formData.append("data", JSON.stringify(this.payLoad));
if (this.eofile) {
  formData.append("myfile", this.eofile, this.eofile.name);
}
this.httpClient.post(APIURL,  formData).subscribe(
  result => {
  ....

我的问题是我总是按如下方式在 Node 处检索正文:

router.post('/updateeocoverage', async   (req, res, next) => {
    console.log(req.body)
    return;
    ....

但是使用我现在在 Angular 中使用的方法，req.body 正在检索{}

是POST错误，还是Node端路由器错误？

谢谢。

以下 PABLO 对遇到此问题的人的回答更新(已提供解决方案):

使用 Multer 解决了这个问题，但正如他所说，需要一些解决方法来设置文件名，但最重要的是需要对用户进行身份验证，因此:

const multer = require('multer')
const path = require('path')

为了对用户进行身份验证，我在 header 上发送了身份验证参数。将其作为 formdata.append 发送对我不起作用。这设置 true 或 false 上传文件，否则任何人都可以上传任何东西到路由:

async function authenticateUser(req, file, cb) {
    let tempcred = JSON.parse(req.headers.data)
    let credentials = tempcred.credentials;
    let userData = await utils.isValidUser((credentials), false);
    if (userData.isValid == false) {
        cb(null, false)
        return;
    }
    else {
        cb(null, true)
    }
}

然后，由于 Multer 使用随机名称上传文件，而我需要使用用户 ID 名称和文件扩展名保存它，因此我执行以下操作:

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/eofiles/')
    },
    filename: async function (req, file, cb) {
        let tempcred = JSON.parse(req.headers.data)
        let credentials = tempcred.credentials;
        let userid = await utils.decrypt(credentials.userid, process.env.SECRET);
        cb(null, userid + path.extname(file.originalname))
    }
});

最后，我声明了用于 Multer 的上传变量:

var upload = multer({ storage: storage, fileFilter: authenticateUser })

并设置路由器:

router.post('/updateeofile', upload.single("myfile"), async (req, res, next) => {
let filename = req.file.filename //gets the file name
...
...
do my stuff, save on database, etc
...
...
});

为了记录，“myfile”是输入文件 ID。

这就是我从 Angular 上传文件的方式:

var APIURL = sessionStorage.getItem('endPoint') + "eoset/updateeofile";    
    const httpOptions = {
      headers: new HttpHeaders({
        'data': `${JSON.stringify(this.payLoad)}`
      })
 };
 let formData = new FormData();
    if (this.eofile) {
      formData.append("myfile", this.eofile, this.eofile.name);
    }
    this.httpClient.post(APIURL, formData, httpOptions).subscribe(
      result => {
...
...
...
 },
      error => {

});

我今天在这上面花了 6 个小时。我希望这对您有所帮助并节省您一些时间。

Answer 1

尝试使用 Multer

npm i multer

const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })
router.post('/updateeocoverage', upload.single('myfile'), function (req, res, next) {
    res.json(JSON.parse(req.body.data))
  })

您需要指明目标文件夹(第 2 行)并确定文件名、扩展名等。