我是React JS的新手，我正在做一个项目，在这个项目中，用户在react js中上传了一个嘈杂的音频文件（客户端），然后用户点击降噪按钮，该按钮使用spawn库执行python文件。然后，该python文件从用户处获取噪声输入文件，对该文件进行降噪并将该文件保存在服务器中，这是目前我的系统的目录。然后我能够返回降噪文件给用户。一切都工作得很好，直到现在。
现在我尝试做的是，当用户点击降噪按钮，一个加载组件应该出现，这个组件应该是可见的，直到该python文件已执行，或者有另一种可能性，这是，显示加载组件，直到有在一个特定的目录变化。变化意味着降噪文件已上传到服务器，并为用户准备。
我已经研究了很多，但找不到解决我问题的方法。
这是我的React JS文件：

import React from "react";
import Navbar from "../navbar/Navbar";
import { useState } from "react";
import axios from "axios";
import CustomModal from "../../containers/modal/Modal";
import UploadedAudios from "../uploadedAudios/UploadedAudios";
import NoisySpectogram from "../../spectograms_for_uploaded_audio/spec_noisy.png";
import DenoisedSpectogram from "../../spectograms_for_uploaded_audio/spec_denoised.png";
import logo from "../../assets/sound.png";
import DenoiseModal from "../denoiseModal/DenoiseModal";

const AudioUpload = () => {
  const [modal, setModal] = useState(false);
  const [audioSource, setAudioSource] = useState(null);
  const [showDenoisedModal, setShowDenoisedModal] = useState(false);
  const rawUrl = "http://localhost:8000/denoise-uploaded-audio-raw";

  const showDenoiseModal = () => {
    setShowDenoisedModal(!showDenoisedModal);
  };

const handleAudioChange = (event) => {
    const file = event.target.files[0];
    setAudioSource(file);
  };

  //file uplaod in a folder
  const onAudioSubmit = (e) => {
    e.preventDefault();
    const url = "http://localhost:8000/upload-audio";
    const data = new FormData();
    data.append("file", audioSource);
    data.append("fileName", audioSource.name);

    axios.post(url, data).then((e) => {
      console.log("success");
    });

    alert("Audio Uploaded Successfully");
  };

  const selectModal = () => {
    setModal(!modal);
  };
  return (
    <>
      <div className="audio_upload">
        <CustomModal
          displayModal={modal}
          closeModal={selectModal}
          spectogram1={NoisySpectogram}
          spectogram2={DenoisedSpectogram}
        />
        <DenoiseModal
          displayModal={showDenoisedModal}
          closeModal={showDenoiseModal}
          denoiseByRawUrl={rawUrl}
        />
        <Navbar />
        <div className="audio_upload-container section__padding ">
          <div className="audio_upload-container-title">
            <div />
            <h1>Select your audio file:</h1>
          </div>
          <div className="audio_upload-container-text">
            <form
              method="post"
              action="#"
              id="#"
              onSubmit={onAudioSubmit}
              className="form-group"
            >
              <input
                type="file"
                className="form-control"
                id="media-URL"
                accept="audio/wav,audio/mp3,audio/*;capture=microphone"
                onChange={(event) => {
                  handleAudioChange(event);
                }}
              />
              <button className="submitbtn" style={{}}>
                {" "}
                Submit{" "}
              </button>
            </form>
          </div>
          <div className="audio_upload_buttons_section ">
            <div className="audio_upload_denoise_button">
              <button
                onClick={() => showDenoiseModal()}
                type="submit"
                style={{ color: "white" }}
              >
                Denoise
              </button>
            </div>

            <div className="audio_upload_denoise_button">
              <button
                style={{
                  backgroundColor: "#1a068a",
                  border: "2px solid #0c0572",
                }}
                onClick={() => selectModal()}
                id="show-spec-btn"
              >
                Show Spectograms
              </button>
            </div>
          </div>
          <br />
        </div>
      </div>
      <UploadedAudios />
      <div>
    </>
      );
};

export default AudioUpload;

表示模态.js文件：

import React from "react";
import axios from "axios";

const DenoiseModal = (props) => {

  const denoiseAudioRaw = (e) => {
    e.preventDefault();
    const url = props.denoiseByRawUrl;
    axios.post(url).then((e) => {
      console.log("successfull");
    });
  };

  function closeModal(e) {
    e.stopPropagation();
    props.closeModal();
  }

  const divStyle = {
    display: props.displayModal ? "block" : "none",
  };

  return (
    <>
      <div className="denoise_modal" onClick={closeModal} style={divStyle}>
        <div
          className="denoise_modal-content"
          onClick={(e) => e.stopPropagation()}
        >
          <span className="denoise_modal_close" onClick={closeModal}>
            &times;
          </span>

          <div className="denoise_modal_row">
              <form method="POST" onSubmit={denoiseAudioRaw}>
                <button
                  type="submit"
                  onClick={closeModal}
                  sx={{
                    color: "white",
                    backgroundColor: "#042c54",
                    height: 30,
                    marginTop: 2,
                    marginLeft: 5,
                  }}
                >
                  Denoise using Raw
                </button>
              </form>
           </div>
        </>
  );
};

export default DenoiseModal;

这是我的server.js文件：

const path = require("path");
const fs = require("fs");
const express = require("express");
const multer = require("multer");
const cors = require("cors");
const app = express();
const { spawn } = require("child_process");
const { request } = require("http");
const { response } = require("express");
const { stderr } = require("process");

app.use(cors());
app.use(express.static("uploads"));
app.use(express.json());
app.use(express.static("uploaded_audio"));

// uploading single audio file in different directories, 
// one to show at the client side as noisy input file and one as a input to the python file.

var uploadAudioStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploaded_audio/");
  },
  filename: (req, file, cb) => {
    cb(null, "audio.wav");
  },
});

var tempUploadAudioStorage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "../client/src/denoised_uploaded_audio/");
  },
  filename: function (req, file, cb) {
    // file name
    cb(null, `inputUploadAudio.wav`);
  },
});

const tempAudioUpload = multer({ storage: tempUploadAudioStorage }).single(
  "file"
);
const audioUpload = multer({ storage: uploadAudioStorage }).single("file");

function multipleAudioFilesUpload(req, res, next) {
  tempAudioUpload(req, res, next);
  audioUpload(req, res, next);
}

app.post("/upload-audio", multipleAudioFilesUpload, (req, res) => {
  res.json({ file: req.file });
});
function denoiseUploadedAudioRaw(req, res) {
  var spawn = require("child_process").spawn;
  var process = spawn("python", ["denoise_uploaded_audio_raw.py"]);

  process.stdout.on("data", function async(data) {
    console.log(data.toString());
  });
}
app.post("/denoise-uploaded-audio-raw", denoiseUploadedAudioRaw);

app.listen(8000, () => {
  console.log("server is running");
});

然后我有一个python文件，它从**uploaded_audio/**目录中获取输入，然后对有噪声的文件进行降噪，并将降噪后的（输出）文件保存在客户端（react js）文件夹中。