javascript - 使用 React 表单通过 Axios 提交文件后出现重定向问题

Question

一般来说，我对 React 和 JS 有点陌生，所以我对这些类型的应用程序不太熟悉。无论如何，我在提交需要一些文件的表单后尝试重定向到另一个页面。我正在使用 Multer 和 Axios 将文件上传到后端，如果处理成功，我将在后端处理文件并返回重定向。

React.js 代码

import React, { setFile,useState } from "react";
import { Redirect, useLocation } from 'react-router'
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Form from 'react-bootstrap/Form';
import './SomeCss.css';
import axios from "axios";

function FileUpload() {
  const [hoteles, setHoteles] = useState("");
  const [aplicapromo, setAplicaPromo] = useState(false)
  const [uploadFile, setUploadFile] = React.useState();
  const [submitted, setSubmitted] = useState(false);

  const onChangeFile = e => {
    setUploadFile(e.target.files);
  };

  const handleChangeCheckbox = () => {
    setAplicaPromo(!aplicapromo);
  };
  
  const submitForm = (event) => {
    //event.preventDefault();
    const dataArray = new FormData();
    dataArray.append('hoteles', hoteles);
    dataArray.append('aplicapromo', aplicapromo);
    for (let i = 0 ; i < uploadFile.length ; i++) {
      dataArray.append('archivos', uploadFile[i]);
  }
    axios
      .post("http://localhost:8000/upload", dataArray, {
        headers: {
          "Content-Type": "multipart/form-data",
          "Access-Control-Allow-Origin": "*"
        }
      })
      .then((response) => {
        setSubmitted(true)
        alert(response)
      })
      .catch((error) => {
       alert(error)
      });
  };
  if (submitted) {
    return <Redirect push to={{
      pathname: '/DisplayResults',
    }}
    />
  }
  return (
    <div className="SubirFiles-MainContainer ">

      <Form onSubmit={submitForm}>
        <h1>Welcome</h1>
        <p>
          Please select the necesary files and fill the form.
        </p>
        <hr />
        <Form.Group as={Row} controlId="formFileMultiple" className="mb-3">
          <Form.Label column sm="2">
            Files
          </Form.Label>
          <Col sm="10">
            <Form.Control onChange={onChangeFile} variant="dark" name="archivos" accept=".xls, .xlsx" type="file" multiple  />
          </Col>
        </Form.Group>

        <Form.Group as={Row} controlId="formFileMultiple" className="mb-3">
          <Form.Label column sm="2">
            Hotel List
          </Form.Label>
          <Col sm="10">
            <Form.Control type="text" value={hoteles} onChange={(e) => setHoteles(e.target.value)}  
            name="hoteles" required className="mb-3" 
            placeholder="placeholder" />
          </Col>
          <Form.Control.Feedback type="invalid">
           Pleause use the correct format
          </Form.Control.Feedback>
        </Form.Group>

        <Form.Group as={Row}>
          <Form.Label column sm="2">
            Apply Discount
          </Form.Label>
          <Col sm="10">
            <Form.Check type="checkbox" defaultChecked={aplicapromo} 
              onChange={handleChangeCheckbox}
              name="aplicapromo" className="mb-3" id="cboxpromos" />
          </Col>
        </Form.Group>

        <Button as="input" type="submit" variant="dark" value="Continuar" />{' '}
      </Form>
    </div>

  );
}

export default function App() {
  return <FileUpload />;
}

这是后端代码，它接收来自 FORM 的文件和信息的 Post 请愿书

后端代码

const express = require('express');
const cors = require('cors');
const app = express();
app.use(express.json());
const fs = require('fs')
const multer = require('multer');
const dotenv = require("dotenv");
const path = require('path')
const functions = require("./functions");
dotenv.config();
app.use(cors('*'));

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, process.env.CARPETA)
  },
  filename: function (req, file, cb) {
    fs.access(path.join(process.env.CARPETA, file.originalname), (err) => {
      if (err) {
        cb(null, file.originalname)
      } else {
        fs.rename(path.join(process.env.CARPETA, file.originalname), path.join(process.env.CARPETA, +Date.now() + "_" + file.originalname), function (err) {
          if (err) console.log('ERROR: ' + err);
          cb(null, file.originalname)
        });
      }
    });
  }
})

const upload = multer({ storage: storage });


app.get('/', async (req, res) => {
  console.log('GET OK');
  res.sendStatus(200);
});

app.get('/upload', async (req, res) => {
  console.log('GET upload');
  res.sendStatus(200);
});

// Upload Endpoint
app.post("/upload", upload.array("archivos"), uploadFiles);

async function uploadFiles(req, res) {
  //console.dir(req.body);
  console.log(req.files);
  console.log(req.body.hoteles);
  console.log(req.body.aplicapromo);
  let aplicapromo = (req.body.aplicapromo === 'true')
  let hotelstring = req.body.hoteles
  let objeto = await functions.SomeProcess(aplicapromo, hotelstring)
  console.log(objeto)
  if (objeto.error) {

    console.log("error")
    return res.status(400).json({
      success: false,
      message: objeto.descerror,
      errors: objeto.error
    });
  }
  else {
    console.log("Process succesful")
    return res.status(200).json({
      success: true,
      message: "Process complete, redirecting to next page..."
    })
  }
}



app.listen(8000, () => console.log('Server Started...'));

在我提交文件后，该过程似乎正在运行，但是，一旦该过程完成，我就不会在客户端收到任何东西。另外，由于处理文件的函数很长，我使用的是异步语法，我不知道我是否做错了什么或者遗漏了什么，所以任何形式的帮助都会很棒！:)

标签： javascriptnode.jsreactjsexpressaxios