es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo cargar y reproducir un archivo de audio usando la etiqueta de entrada en Reactjs.

12 Jul, 2023 Programación

Quiero subir un archivo de audio en Reactjs utilizando la etiqueta de entrada, pero mi código no parece funcionar.

Aquí está mi código:

function App() {

  const [fileName, setFileName] = useState(null)
  const [isUploaded, setIsUploaded] = useState(false)

  const onFileChange = (e) => {
    setFileName(e.target.files[0])
  }

  const onFileUpload = async () => {
    const formData = new FormData()

    await formData.append(
      "myFile",
      fileName,
      fileName.name
    )

    console.log(fileName)

    setIsUploaded(true)
  }

  return (
    <div>
      <route exact="" path="/" render="{()" ==""> (
        isUploaded ? (
          <editscreen filename="{fileName}"></editscreen>
        ) : (
            <div>
                <input classname="inputFile" type="file" accept="audio/*" name="file" onchange="{onFileChange}">
                <button type="submit" onclick="{onFileUpload}">¡Subir!</button>
            </div>
        )
      )}/>
    </route></div>
  );
}

export default App;

¿Podrían decirme qué hay de malo en esto o sugerirme otra forma de lograr lo mismo?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Primero, asegúrese de haber agregado las dependencias necesarias para manejar la carga de archivos como Axios o Fetch API.

    En la función onFileChange, asegúrese de verificar si hay un archivo seleccionado antes de actualizar el estado, de esta manera:

    const onFileChange = (e) => {
    if (e.target.files[0]) {
      setFileName(e.target.files[0]);
    }
};

    Además, asegúrese de que el tipo de botón sea “button” en lugar de “submit”, de lo contrario, podría provocar una recarga de la página.

    <button type="button" onclick="{onFileUpload}">¡Subir!</button>

    En la función onFileUpload, debe realizar una solicitud POST al servidor para cargar el archivo. Aquí hay un ejemplo utilizando Axios:

    const onFileUpload = async () => {
    const formData = new FormData();
    formData.append("audio", fileName);

    try {
      await axios.post("http://example.com/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      setIsUploaded(true);
    } catch (err) {
      console.log(err);
    }
};

    Asegúrese de reemplazar “http://example.com/upload” con la URL de su punto final del servidor para manejar la carga de archivos.

    Finalmente, puede verificar si el archivo se ha cargado utilizando la variable de estado isUploaded y renderizar condicionalmente la interfaz de usuario.

    return (
    <div>
      {isUploaded ? (
        <div>¡Archivo subido exitosamente!</div>
      ) : (
        <div>
          <input classname="inputFile" type="file" accept="audio/*" name="file" onchange="{onFileChange}">
          <button type="button" onclick="{onFileUpload}">¡Subir!</button>
        </div>
      )}
    </div>
  );

Comments are closed.