无法使用 Angular 将表单数据发送到节点服务器 [重复]答案

【问题标题】：Unable to send formdata to node server using Angular [duplicate]无法使用 Angular 将表单数据发送到节点服务器 [重复]
【发布时间】：2021-05-21 09:55:41
【问题描述】：

我正在尝试在应用验证后以 Angular 创建一个注册页面，并将其发送到服务器并将其保存到 mongodb。

我试过这样

  register_user() {
    const data = this.register_form.getRawValue();

    const formData: FormData = new FormData();

    formData.append('name', data.name);
    formData.append('email', data.email);
    formData.append('password', data.password);
    // formData.append('image', this.image);
    formData.append('gender', 'Male');

    formData.forEach((value, key) => {
      console.log(value);
    });

    this.user_service.create_user(formData).subscribe((res) => {
      console.log(res);
    });
  }

服务

  create_user(data: FormData) {
    return this.http.post(`${environment.BASE_URL}/user/create-user`, data, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
  }

节点服务器

// required Route
const User = require('./Routes/user');

// Using middle ware
app.use(cors());
app.use(
  express.urlencoded({
    extended: true,
  })
);
app.use(express.json());

app.use('/user', User);

app.listen(PORT, () => console.log(`App started on http://localhost:${PORT}`));

router.post('/create-user', async (req, res) => {
  console.log(req.body);
  let { name, email, gender, mobile_no, password } = req.body;

  try {
    if (
      !(name && email && gender && mobile_no && password && password.length > 8)
    ) {
      throw new Error(
        `All fields are required name: ${name} , email: ${email} , gender: ${gender} , MobileNo: ${mobile_no} .Password length must be greater then 8 character`
      );
    }
    password = bcrypt.hashSync(password, parseInt(process.env.BCRYPT_SALT));

    // let response = await USER.create({ name, email, gender, mobile_no });
    const token = await jwt.sign(
      { name, email, mobile_no, user_id: response._id },
      process.env.JWT_KEY
    );

    response = response.toObject();
    response['token'] = token;

    res.status(200).json({ err: 0, message: 'User Created', response });
  } catch (error) {
    res.status(404).json({ err: 1, message: error.message, error });
  }
});

在请求正文中的服务器上，我得到空对象 {}

但我尝试发送正常的 Js 对象，它工作正常。

我该如何解决这个问题？ formdata 是否需要在 app.module.ts 中安装或导入任何其他模块？

【问题讨论】：

标签： javascript angular typescript express multipartform-data

【解决方案1】：

您应该使用multiparty。这是您接收发送到后端的 FormData 数据的最便捷方式。

const multiparty = require('multiparty');

router.post('/create-user', async (req, res) => {
    const form = new multiparty.Form();

    // catch formData event
    form.parse(req, (err, fields, files) => {
        let {name, email, gender, mobile_no, password} = fields;
        try {
            if (
                !(name && email && gender && mobile_no && password && password.length > 8)
            ) {
                throw new Error(
                    `All fields are required name: ${name} , email: ${email} , gender: ${gender} , MobileNo: ${mobile_no} .Password length must be greater then 8 character`
                );
            }
            password = bcrypt.hashSync(password, parseInt(process.env.BCRYPT_SALT));

            // let response = await USER.create({ name, email, gender, mobile_no });
            const token = await jwt.sign(
                {name, email, mobile_no, user_id: response._id},
                process.env.JWT_KEY
            );

            response = response.toObject();
            response['token'] = token;

            res.status(200).json({err: 0, message: 'User Created', response});
        } catch (error) {
            res.status(404).json({err: 1, message: error.message, error});
        }
    });
});

【讨论】：