Estoy trabajando en un proyecto (usando React.js Express.js y Node.js) para convertir una imagen cargada por el usuario en NFT en la cadena de bloques de Ethereum y, para eso, necesito cargar la imagen en un IPFS (estoy usando Pinata) y luego use el URI de piñata en los metadatos para acuñar un nuevo NFT. (Avíseme si me equivoco aquí, todavía soy novato en web3)
Para cargar mi imagen en Pinata IPFS, envío la cadena base64 de la imagen desde el lado del cliente al lado del servidor y luego llamo al método pinFileToIPFS . Este es el código de mi archivo del lado del servidor
const axios = require('axios'); const fs = require('fs'); const FormData = require('form-data'); const router = require('express').Router(); const { Readable } = require('stream'); const pinFileToIPFS = (image) => { const url = `https://api.pinata.cloud/pinning/pinJSONToIPFS`; const buffer = Buffer.from(image); const stream = Readable.from(buffer); const filename = `an-awesome-nft_${Date.now()}.png`; stream.path = filename; const formData = new FormData(); formData.append("file", stream); return axios.post(url, formData, { headers: { 'Content-Type': `multipart/form-data; boundary= ${formData._boundary}`, 'pinata_api_key': "*******************", 'pinata_secret_api_key': "**********************************", } } ).then(function (response) { console.log("Success: ", response); }).catch(function (error) { console.log("Fail! ", error.response.data); }); }; router.route('/').post((req, res) => { const image = req.body.image; pinFileToIPFS(image); }); module.exports = router; Aquí req.body.image contiene la cadena base64 del archivo cargado por el usuario. He intentado convertir la cadena base64 en un búfer y luego convertir el búfer en un flujo legible (como se hace en la documentación oficial de Pianata pero para un archivo local) y luego envolverlo en FormData(), pero sigo obteniendo lo siguiente error.
data: { error: 'This API endpoint requires valid JSON, and a JSON content-type' }Sé que el problema está en el formato de mi imagen/archivo que se envía a la API, pero no puedo descifrarlo. Todavía soy un novato en web3 y blockchains, ¡así que por favor ayuda!
La forma recomendada de interactuar con Pinata es mediante el SDK de Node.JS. Este SDK tiene una función pinFileToIPFS , le permite cargar una imagen en sus nodos IPFS en forma de un stream legible. Una muestra de esto se vería como
const fs = require('fs'); const readableStreamForFile = fs.createReadStream('./yourfile.png'); const options = { pinataMetadata: { name: MyCustomName, keyvalues: { customKey: 'customValue', customKey2: 'customValue2' } }, pinataOptions: { cidVersion: 0 } }; pinata.pinFileToIPFS(readableStreamForFile, options).then((result) => { //handle results here console.log(result); }).catch((err) => { //handle error here console.log(err); }); Sin embargo , si no está listo para usar sus puntos finales de API y simplemente publicar en ellos a través de axios, hay un punto final de API separado . /pinning/pinFileToIPFS . Se pueden encontrar ejemplos de este método en sus API Docs .
Debe haber un error en el parámetro de la imagen. Una simple representación de búfer de la imagen debería funcionar. La secuencia legible no es necesaria.
En lugar de crear el búfer, puede usar un middleware como express-fileupload para acceder a la representación del búfer del archivo cargado en el lado del cliente directamente.
const file = req.files; const url = "https://api.pinata.cloud/pinning/pinFileToIPFS"; const data = new FormData(); data.append("file", file.file.data, { filepath: "anyname" }); const result = await axios.post(url, data, { maxContentLength: -1, headers: { "Content-Type": `multipart/form-data; boundary=${data._boundary}`, pinata_api_key: process.env.PINATA_API_KEY, pinata_secret_api_key: process.env.PINATA_API_SECRET, path: "somename", }, });Es posible que desee considerar cambiar las siguientes dos líneas y usar el punto final https://api.pinata.cloud/pinning/pinFileToIPFS en su lugar:
const buffer = Buffer.from(image); -> const buffer = Buffer.from(image, "base64");
y
formData.append("file", stream); -> formData.append("file", stream, "fileNameOfChoiche.png);