Planteamiento del problema:-

He escrito el código para subir una imagen en React JS. Sin embargo, necesito enviar los datos de la imagen al servidor y la base de datos, por eso necesito los datos de la imagen en Byte Array. ¿Cómo puedo obtener los datos de la imagen cargada en una matriz de bytes?

Cualquier ayuda con respecto a este problema es muy apreciada.

Código:-

 import React, { useState } from "react"; import "./style.css"; const ImageUpload = () => { const [file, setFile] = useState(null); const [flag, setFlag] = useState(false); const fileChangedHandler = (event) => { let file = event.target.files[0]; let reader = new FileReader(); console.log(file); reader.onload = function (e) { setFile(e.target.result); setFlag(true) }; reader.readAsDataURL(event.target.files[0]); }; return ( <div id="modeling"> <div className="container"> <div className="row"> <div className="col"> <div className="modeling-text"> </div> </div> </div> {flag ? <img src={file} alt={""} width="190" height="220" text-align="left" style={{ display: "block" }} />: <img src="./Image_Placeholder.jpeg" alt={""} width="190" height="220" text-align="left" style={{ display: "block" }}/>} </div> <div className="input-group mt-1 offset-1"> <div className="custom-file smaller-input"> <input type="file" className="custom-file-input" name="file" inputprops={{ accept: "image/*" }} accept=".png,.jpg,.jpeg" onChange={fileChangedHandler} id="inputGroupFile01" /> <label className="custom-file-label" htmlFor="inputGroupFile01"> Choose your image </label> <i className="bi bi-cloud-upload"></i> </div> </div> </div> ); }; export default ImageUpload;