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

Question

美好的一天，我正在 ReactJS 中制作一个注册表单，注册表单包含名字、姓氏、电子邮件、密码、生日和上传图像字段。我设法将图像上传到服务器中，但是我无法添加其他字段名字、姓氏、电子邮件、密码和生日，它有一个错误 非法参数:未定义，字符串，我可以知道吗我做错了什么？谢谢。

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;

Answer 1

也许对你有帮助

Append the other fields with form data it works for me.

import React, { Component } from 'react';
import './test.css';
import 'font-awesome/css/font-awesome.min.css';
import Header from "../header/header";
import Sidebar from "../sidebar/sidebar";
import axios from "axios/index";
class AddTest extends Component {
    constructor(){
        super();
        this.state={
            categoryData:[],
            courseData:[],
            category:'',
            course:'',
            testFile:null,
            categoryE:'',
            courseE:'',
            testFileE:'',
            ErrorStatus:''

        };
        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.preventDefault();
        this.setState({category:e.target.value});
        this.setState({ErrorStatus:''});
        this.setState({categoryE:''});
        let res = this.menu.value;
        axios({
            method: 'get',
            url: 'http://localhost:7777/api/getCourse/title/'+res,
        })
            .then((response) => {
                this.setState({courseData:response.data});
            })
            .catch((e) =>
            {
                this.setState({success:'Alert: Something went wrong'});
            });
    }
    handleCourse(e){
        let cour = this.course.value;
        this.setState({course:e.target.value});
        this.setState({courseE:''});
    }

    handleFile(e){
        this.setState({ testFile: e.target.files[0] });
        this.setState({testFileE:''});

    }
    validate = () => {
        let isError = false;
        const errors = {};
        if(this.state.category==='')
        {
            isError = true;
            errors.categoryE = 'Please select category';
        }
        if(this.state.course==='')
        {
            isError = true;
            errors.courseE = 'Please select course';
        }
        if(this.state.testFile===null)
        {
            isError = true;
            errors.testFileE = 'Please Select a File';
        }

        if(isError){
            this.setState({
                ...this.state,
                ...errors
            })
        }

        return isError;
    }
    handleSubmit(e)
    {
        e.preventDefault();
        const err = this.validate();
        if(!err)
        {
            var formData = {
                category:this.state.category,
                course:this.state.course,
            };
            const {category,course} = this.state;
            let fd = new FormData();
            fd.append('Test',this.state.testFile,this.state.testFile.name);
            fd.append('category',category);
            fd.append('course',course);
            console.log(fd);
           axios({
                method: 'post',
                url: 'http://localhost:7777/api/uploadTest',
                data: fd,
            })
                .then((response) => {
                    if(response.data=='Success')
                    {
                        alert('Test has been Added..!!');

                    }
                    else
                    {
                        alert('Something went wrong');
                        this.setState({category:''});
                    }
                    // this.setState({success:'Alert: '+response.data});
                })
                .catch((e) =>
                {
                    console.error(e);
                    this.setState({success:'Alert: Something went wrong'});
                });
        }
    }
    componentWillMount(){
        axios({
            method: 'get',
            url: 'http://localhost:7777/api/getCategory',
        })
            .then((response) => {
                this.setState({categoryData:response.data});
            })
            .catch((e) =>
            {
                console.error(e);
                this.setState({success:'Alert: Something went wrong'});
            });
    }
    render() {
        return (
            <div className="AddCourseCategory">
                <Header/>
                <section>
                    <div className="mainwrapper">
                        <Sidebar/>

                        <div className="mainpanel">
                            <div className="pageheader">
                                <div className="media">
                                    <div className="pageicon pull-left">
                                        <i className="fa fa-home"></i>
                                    </div>
                                    <div className="media-body">
                                        <ul className="breadcrumb">
                                            <li><a href="#"><i className="glyphicon glyphicon-home"></i></a></li>
                                            <li>Dashboard</li>
                                            <li>Manage Test</li>
                                        </ul>
                                        <h4>Upload Test</h4>
                                    </div>
                                </div>
                            </div>
                            <div className="contentpanel">
                                <div className="col-sm-5 col-sm-offset-3">
                                    <form encType="multipart/form-data" onSubmit={this.handleSubmit} className="form-horizontal form-bordered" method="post">
                                        <div className="form-group">
                                            <select ref = {(input)=> this.menu = input}  onChange={this.handleCat} className="form-control" name="category" data-toggle="tooltip" data-trigger="hover"
                                                    className="form-control tooltips" title="Select Course Category">
                                                <option selected disabled>Select Category</option>
                                                {
                                                    this.state.categoryData.map((item, index) =>(
                                                        <option key={index} value={item.category}>{item.category}</option>
                                                    ))
                                                }
                                            </select>
                                            <span className='field-error'>{this.state.categoryE}</span>
                                        </div>
                                        <div className="form-group">
                                        <select ref = {(input)=> this.course = input} onChange={this.handleCourse} className="form-control" name="course" data-toggle="tooltip" data-trigger="hover"
                                        className="form-control tooltips" title="Select Course ">
                                        <option selected disabled>Select Course</option>
                                        {
                                        this.state.courseData.map((item, index) =>(
                                        <option key={index} value={item.title}>{item.title}</option>
                                        ))
                                        }
                                        </select>
                                        <span className='field-error'>{this.state.courseE}</span>
                                        </div>
                                        <div className="form-group">
                                            <input onChange={this.handleFile} name="testFile"  type="file" placeholder="Select File Here"
                                                   title="Upload Test Here"
                                                   data-toggle="tooltip" data-trigger="hover"
                                                   className="form-control tooltips"/>
                                            <span className='field-error'>{this.state.testFileE}</span>
                                        </div>
                                        <div className="form-group">
                                            <button type="submit" className="btn btn-info">Save</button>
                                        </div>
                                    </form>
                                </div>
                            </div>


                        </div>
                    </div>

                </section>

            </div>
        );
    }
}

export default AddTest;