Angular http发布如何附加文件和数据

时间:2018-06-16 15:16:08

标签: angular http

我有一个数据库(MongoDB),一个服务器(用Node制作 - 使用Express)和一个客户端(用Angular制作)。 我希望我的客户能够将文件和文本(JSON)上传到节点服务器,然后将数据存储在数据库中。

我使用Postman发送图像和数据 - 以确保服务器设置正确。 (见截图)

Postman settings with dummy data

像这样使用Postman发送数据有效。现在我想让我的Angular客户端做同样的事情。以下是我正在使用的代码。现在有点混乱,因为我尝试了很多不同的东西。

sendToServer(url){
    let inputField_Image = <HTMLInputElement>document.getElementById("inputField_image");
    let inputField_Raw = <HTMLInputElement>document.getElementById("inputField_raw");
    let image = inputField_Image.value;
    let raw = inputField_Raw.value;
    let data = JSON.parse(raw);

    let formData: FormData = new FormData();

    formData.append('image', image);

    formData.append('name', data.name);
    formData.append('cost', data.cost);
    formData.append('type', data.type);
    formData.append('subType', data.subType);
    formData.append('text', data.text);
    formData.append('flavor', data.flavor);
    formData.append('power', data.power);
    formData.append('toughness', data.toughness);

    let options = { content: formData };

    //let x = JSON.stringify(formData);

    //console.log(x);

    this.http.post(url, options).subscribe((res)=>{
      console.log('response:', res);
    });

}

当我在客户端中使用相同的虚拟数据运行此代码时 - 我得到&#34; TypeError:无法读取属性&#39; path&#39;未定义&#34; - 好像服务器根本没有收到任何数据。

以下是我的节点服务器的代码:

const mongoose = require('mongoose');
const express = require('express');
const router = express.Router();
const PASSWORD = "admin";
const multer = require('multer');
const path = require('path');
const fs = require('fs');

//other code..

router.post('/image', upload.single('image'), function (req, res, next) {
    let imgPath = path.join(__dirname, '../') + req.file.path;
    let imgAsBase64 = base64_encode(imgPath);
    let newCard = req.body;
    newCard.image = imgAsBase64;

    Card.create(newCard).then(function(card){
        console.log('\nThe following Schema was successfully saved to Mongodb:');
        console.log(card.name);
    }).catch(function(error){
        console.log('\nTrying to save a Schema Mongodb, error: \n', error);
    });

    res.send('Successfully uploaded card!');
});

//other code..

服务器端代码与Postman一起使用,所以我认为我的错误在客户端。 如何发送图像文件(使用<input type="file">元素上传)和数据(使用<textarea>元素上传)?

编辑:我在服务器端添加了console.log(req.body); - 只是为了看看我收到了什么。我得到了这个:{ content: {} }不知道为什么......

0 个答案:

没有答案
相关问题