ReactJS Невозможно передать файл загрузки и другие данные формы одновременно через axios - PullRequest
Новая
       5

ReactJS Невозможно передать файл загрузки и другие данные формы одновременно через axios

0 голосов
/ 03 марта 2020

У меня есть форма с input type="file" и другими входами, и мне нужно передать данные через ax ios.

Я могу передать все эти данные по отдельности, но при попытке передать оба по одному и тому же вызову один из них пуст .

Я попытался добавить данные файла в форму для отправки данных, но безуспешно.

Вот моя форма, которую я пытаюсь отправить: 

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import {
  Button,
  Modal,
  FormGroup,
  FormControl,
  FormLabel
} from "react-bootstrap";
import axios from "axios";
import { useForm } from "react-hook-form";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";

export default function UserForm(props) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [showForm, setShowForm] = useState(true);
  if (props.data.first_name) setValue("nombres", props.data.first_name);
  if (props.data.last_name) setValue("apellidos", props.data.last_name);
  const fileSelectedHandler = event => {
    const selectedFile = event.target.files[0];
  };

  const { register, handleSubmit, setValue, errors } = useForm();
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const onSubmit = data => {
    const fd = new FormData();
    fd.append("image", props.data.jmFile, props.data.jmFile.name);
    fd.append("data", data);
    let mounted = true;
    const result = axios
      .post("http://www.localhost/avatar/api/saveUser", data)
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        if (mounted) {
          console.log(error);
        }
      });

    return () => (mounted = false);
  };

  return (
    <div className="container mt-5">
      <div className="row">
        <div className="col-xl-3 col-lg-4 col-md-6 col-sm-6 offset-4">
          <form onSubmit={handleSubmit(onSubmit)}>
            <input type="hidden" name="id" ref={register} />
            {showMsg && <p className="alert alert-danger mb-3">{msg}</p>}
            <FormGroup controlId="email">
              <FormLabel>
                email{" "}
                {errors.email && (
                  <span style={{ color: "Red" }}> required</span>
                )}
              </FormLabel>
              <FormControl
                autoFocus
                name="email"
                ref={register({ required: true })}
              />
            </FormGroup>
            <FormGroup controlId="first_name" bssize="large">
              <FormLabel>
                Nombres{" "}
                {errors.first_name && (
                  <span style={{ color: "Red" }}> required</span>
                )}{" "}
              </FormLabel>
              <FormControl name="first_name" ref={register} />
            </FormGroup>
            <FormGroup controlId="last_name" bssize="large">
              <FormLabel>
                Apellidos{" "}
                {errors.last_name && (
                  <span style={{ color: "Red" }}> required</span>
                )}
              </FormLabel>
              <FormControl
                name="last_name"
                ref={register({ required: true })}
              />
            </FormGroup>
            <div className="col-md-6">
              <FormLabel>Picture</FormLabel>
              <input
                name="picture"
                id="upload"
                type="file"
                onChange={fileSelectedHandler}
              />
            </div>
            <input
              type="submit"
              value="Save"
              className="btn btn-lg btn-block login-button"
            />
          </form>
        </div>
      </div>
    </div>
  );
}
...