Javascript ReactJS Axios使用Multer传递数据并上传图像

您好，我正在用ReactJS制作一份注册表。注册表中有名字、姓氏、电子邮件、密码、生日和上传图像等字段。我设法将图像上传到服务器上，但是我不能添加其他字段firstname、lastname、email、password和birthday，它有一个非法参数错误：未定义，string，我可以知道我做错了什么吗？多谢各位

ReactJS提交事件

import React, { Component } from "react";
import { Link } from "react-router-dom";

import DatePicker from "react-datepicker";
import moment from "moment";

import axios from "axios";

class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment(),
      firstname: "",
      lastname: "",
      email: "",
      password: "",
      dateofbirth: "",
      receipt: "",
      description: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.fileSelectHandler = this.fileSelectHandler.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  fileSelectHandler = event => {
    this.setState({
      receipt: event.target.files[0]
    });
  };

  onChange(e, date) {
    switch (e.target.name) {
      case "receipt":
        this.setState({ receipt: e.target.files[0] });
        break;
      default:
        this.setState({ [e.target.name]: e.target.value });
    }
    e.preventDefault();
  }

  onSubmit(e) {
    e.preventDefault();
    const { description, receipt } = this.state;
    const bodyFormData = new FormData();

    bodyFormData.append("receipt", receipt);

    bodyFormData.append("description", description);

    bodyFormData.append("firstname", this.state.firstname);
    bodyFormData.append("lastname", this.state.lastname);
    bodyFormData.append("password", this.state.password);
    bodyFormData.append("email", this.state.email);

    const newUser = {
      firstname: this.state.firstname,
      lastname: this.state.lastname,
      email: this.state.email,
      password: this.state.password,
      dateofbirth: document.getElementById("date").value
    };

    axios
      .post("/api/users/register", bodyFormData, newUser, {
        headers: {
          accept: "application/json",
          "Accept-Language": "en-US,en;q=0.8"
        }
      })
      .then(function(res) {
        console.log(res.data);
      })
      .catch(err => console.log(err));

    console.log(bodyFormData);
  }

  render() {
    return (
      <div className="container_child signup_container">
        <div className="signup_thumbnail">
          <div className="thumbnail__content">
            <h1 className="heading-primary">this is overlay with image</h1>
            <h2 className="heading-secondary">
              this is overlay with imagessss
            </h2>
          </div>
          <div className="signup__overlay" />
        </div>
        <div className="container_child signup_form">
          <form onSubmit={this.onSubmit} encType="multipart/form-data">
            <div className="form-group">
              <label htmlFor="username">Firstname</label>
              <input
                className="form-control"
                type="text"
                name="firstname"
                id="firstname"
                placeholder="Juan"
                value={this.state.firstname}
                onChange={this.onChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="lastname">Last Name</label>
              <input
                className="form-control"
                type="text"
                name="lastname"
                id="last-name"
                placeholder="Dela Cruz"
                value={this.state.lastname}
                onChange={this.onChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="prcid">Email</label>
              <input
                className="form-control"
                type="email"
                name="email"
                id="email"
                placeholder="juan@gmail.com"
                value={this.state.email}
                onChange={this.onChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="prcid">Password</label>
              <input
                className="form-control"
                type="password"
                name="password"
                id="password"
                value={this.state.password}
                onChange={this.onChange}
              />
            </div>

            <div className="form-group">
              <label htmlFor="prcid">Birthday:</label>
              <DatePicker
                id="date"
                selected={this.state.startDate}
                onChange={this.handleChange}
              />;
            </div>

            <div className="form-group">
              <div
                className="mdl-textfield mdl-js-textfield mdl-textfield--file is-upgraded"
                data-upgraded=",MaterialTextfield"
              >
                <input
                  className="mdl-textfield__input"
                  placeholder="File"
                  type="text"
                  id="uploadFile"
                  name="description"
                  value={this.state.description}
                  onChange={this.onChange}
                  //readonly="true"
                />
                <div className="">
                  <input
                    type="file"
                    ref="files"
                    id="uploadBtn"
                    name="receipt"
                    onChange={this.onChange}
                  />
                </div>
                {/* // <Dropzone onDrop={this.onDrop}>
                  //   <div>Try dropping some files here, or click to select files to upload.</div>
                  // </Dropzone> */}
              </div>
            </div>
            <div className="m-t-lg">
              <ul className="list-inline">
                <li>
                  <input
                    className="btn btn--form"
                    type="submit"
                    value="Register"
                  />
                </li>
                <li>
                  <Link to="/login">I am already a member</Link>
                </li>
              </ul>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Register;

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“反应日期选择器”导入日期选择器；
从“时刻”中导入时刻；
从“axios”导入axios；
类寄存器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
起始日期：力矩（），
名字：“，
姓氏：“，
电邮：“，
密码：“”，
出生日期：“，
收据：“，
说明：“”
};
this.handleChange=this.handleChange.bind（this）；
this.onChange=this.onChange.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
this.fileSelectHandler=this.fileSelectHandler.bind（this）；
}
手册更改（日期）{
这是我的国家({
开始日期：日期
});
}
fileSelectHandler=event=>{
这是我的国家({
接收：event.target.files[0]
});
};
一次变更（e，日期）{
开关（如target.name）{
“收据”一案：
this.setState（{receive:e.target.files[0]}）；
打破
违约：
this.setState（{[e.target.name]：e.target.value}）；
}
e、 预防默认值（）；
}
提交（e）{
e、 预防默认值（）；
const{description，receive}=this.state；
const bodyFormData=新FormData（）；
bodyFormData.append（“收据”，收据）；
bodyFormData.append（“说明”，说明）；
bodyFormData.append（“firstname”，this.state.firstname）；
bodyFormData.append（“lastname”，this.state.lastname）；
bodyFormData.append（“密码”，this.state.password）；
bodyFormData.append（“email”，this.state.email）；
常量newUser={
名字：this.state.firstname，
lastname:this.state.lastname，
电子邮件：this.state.email，
密码：this.state.password，
出生日期：document.getElementById（“日期”）.value
};
axios
.post（“/api/users/register”），bodyFormData，newUser{
标题：{
接受：“应用程序/json”，
“接受语言”：“en-US，en；q=0.8”
}
})
.然后（功能（res）{
console.log（res.data）；
})
.catch（err=>console.log（err））；
console.log（bodyFormData）；
}
render（）{
返回(
这是用图像覆盖的
这是与ImageSSS的叠加
名字
姓
电子邮件
密码
生日：
;
{/* // 
//尝试在此处删除一些文件，或单击以选择要上载的文件。
//  */}




我已经是会员了


);
}
}
导出默认寄存器；

您正在使用document.getElementById获取日期的值， 为什么不试试使用这个.state.startDate 由于react DOM是虚拟的，而不是真实的DOM，因此通过document.getElementById获得的值将为null

const newUser = {
  firstname: this.state.firstname,
  lastname: this.state.lastname,
  email: this.state.email,
  password: this.state.password,
  dateofbirth: this.state.startDate
};

---

您正在使用document.getElementById获取日期的值， 为什么不试试使用这个.state.startDate 由于react DOM是虚拟的，而不是真实的DOM，因此通过document.getElementById获得的值将为null

const newUser = {
  firstname: this.state.firstname,
  lastname: this.state.lastname,
  email: this.state.email,
  password: this.state.password,
  dateofbirth: this.state.startDate
};

这可能对你有帮助

用表单数据附加其他字段，这对我很有用

import React，{Component}来自'React'；
导入“/test.css”；
导入'font-awesome/css/font-awesome.min.css'；
从“./页眉/页眉”导入页眉；
从“./侧边栏/侧边栏”导入侧边栏；
从“axios/index”导入axios；
类AddTest扩展组件{
构造函数（）{
超级（）；
这个州={
类别数据：[]，
课程数据：[]，
类别：“”，
课程：''，
testFile:null，
类别：“，
课程：''，
testFileE:“”，
错误状态：“”
};
this.handleFile=this.handleFile.bind（this）；
this.handleCat=this.handleCat.bind（this）；
this.handleCourse=this.handleCourse.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleCat（e）{
e、 预防默认值（）；
this.setState（{category:e.target.value}）；
this.setState（{ErrorStatus:''}）；
this.setState（{categoryE:'}）；
设res=this.menu.value；
axios({
方法：“get”，
网址：'http://localhost:7777/api/getCourse/title/“+res，
})
。然后（（响应）=>{
this.setState（{courseData:response.data}）；
})
.catch（（e）=>
{
this.setState（{success:'Alert:Something gours error'）；
});
}
手工课（东）{
设cour=this.course.value；
this.setState（{course:e.target.value}）；
this.setState（{courseE:'}）；
}
手持文件（e）{
this.setState（{testFile:e.target.files[0]}）；
this.setState（{testFileE:''}）；
}
验证=（）=>{
假设isError=false；