Estoy en el proceso de crear una pequeña aplicación next.js que incluye un formulario de carga de archivos. La carga casi funciona. La carga de archivos de texto simples funciona bien, pero los archivos binarios, como las imágenes, cambian ligeramente y no puedo entender por qué.

El contenido del archivo se lee con JavaScript FileReader y el resultado se usa como cuerpo para la solicitud posterior.

El byteLength en el tamaño del cliente coincide con el tamaño en bytes del archivo con ls -l , por lo que asumo que el valor es correcto. Pero cuando se registra el tamaño del cuerpo en el lado de la API, son unos pocos bytes menos para los archivos binarios. Para el texto los tamaños son los mismos.

En el código real, el contenido del archivo se envía a otra API que almacena el contenido en una base de datos y lo pone a disposición para su descarga. El contenido no es el mismo: parece que el "patrón" de dónde están los bytes para las imágenes se ha mantenido, pero los bytes son diferentes.

Por ejemplo, un archivo png pequeño con un tamaño de 1764 bytes sigue siendo 1764 bytes en el lado del cliente pero se convierte en 1731 bytes en el lado del servidor.

Aquí está el código del lado del cliente:

 import { useState } from "react"; const TestPage = () => { const [file, setFile] = useState(); function readFile(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (res) => { resolve(res.target.result); }; reader.onerror = (err) => reject(err); reader.readAsArrayBuffer(file); }); } function onFilesChosen({ target }) { setFile(target.files[0]); } async function onClick(event) { event.preventDefault(); const fileContent = await readFile(file); console.log(fileContent.byteLength); fetch("/api/upload", { method: "POST", body: fileContent, headers: { "Content-Type": "application/octet-stream", }, }).then((r) => alert("Uploaded!")); } return ( <div> <form> <div className="form-group"> <label htmlFor="file-upload">Choose file</label> <input className="form-control-file" onChange={onFilesChosen} type="file" name="file-upload"/> </div> <button type="submit" onClick={onClick}>Upload</button> </form> </div> ); }; export default TestPage;

Y este es el código simple del lado del servidor (solo para mostrar el tamaño del archivo recibido):

 export default function handler(req, res) { const data = req.body; console.log("length", data.length); return res.status(200).end(); }

Intenté usar axios pero no pude hacerlo funcionar.

¿Alguna sugerencia sobre lo que hago mal?