0

tengo ya un par de días dandole vueltas a la situacón pensando que este error estaba en mi backend, no obstante hoy al intentar almacenar una imagen desde postman no tuve problema alguno por lo que supongo el problema de Raiz está en la forma en la que envio formdata con la imagen al servidor.

Estoy usando Expo image-picker para obtener una imagen y mandarla al servidor, el problema es que creo que no lo estoy haciendo correctamente ya que el servidor me muestra el request como null y por lo tanto no pasa nada, este es el codico que estoy intentando:

//Codigo en el componente
    const imagepreview = async()=>{
        let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });
        console.log(result)
        if(result.cancelled == false){
            setImage(result.uri)
            seturi(result.uri)
            let localUri = result.uri;
            let filename = localUri.split('/').pop();
            // Infer the type of the image
            let match = /\.(\w+)$/.exec(filename);
            let type = match ? `image/${match[1]}` : `image`;
            settype(type)
            setname(filename)
        }
    }

    const sendData = async()=>{
        let data = {uri:image,type:fileType, name:name}
        // Upload the image using the fetch and FormData APIs
        let formData = await new FormData();
        // Assume "photo" is the name of the form field the server expects
        await formData.append('photo', data);
        const send = await user.changeprofilepicture(formData)

    }

Codigo en la clase en la que hago las peticiones, sí la estoy mandando dos veces y nunguna de las dos funciona:

    async changeprofilepicture(formdata){
        console.log(formdata)
        const token = JSON.parse(localStorage.getItem('user-token'))
        let url = baseurl+'changeprofilepicture'
        let options = {
          headers: {
            'content-type': 'multipart/form-data'
          }
        }
        await axios.post(url, formdata, options) 
      
         await fetch( {
            method: 'POST',
            body: formdata,
            headers: {
                'Accept': 'application/json',
            ['Content-Type']:'multipart/form-data',
            },
          });

          await axios.post(url, {
              photo: formdata
          }, {headers : 
            {'Content-Type':undefined}})
    }

Y por ultimo mi codigo en el servidor

    async changeprofilepicture({request, response}:HttpContextContract){
        try{
            const file = request.file('photo')
            console.log(file)
            await file?.move(Application.tmpPath())
            return response.json({
                status: 'sure'
            })
    

        }catch (e){
            console.log(e)
        }
    }

Hago enfasis en que desde postman esto está funcionando no obstante estoy seguro de que el error está en la manera en la que envio formdata al servidor, agradecería mucho que alguien pudiese al menos ponerme en el camino correcto para salir del bache en el que ahora estoy

1 respuesta 1

0

Al final logré resolverlo, resulta que en web expo image picker solo te trae la imagen en base64 más no el uri de la imagen, entonces la solución inmediata fue dejar de usar expo image-picker y usar expo document picker, algo como esto:

const imagepreview = async()=>{
    const trye = await DocumentPicker.getDocumentAsync({type: 'image/*'})
    console.log (trye)
    setFile(trye.file)
    setImage(trye.uri)
}

const sendData = async()=>{
    const token = JSON.parse(localStorage.getItem('user-token'))
    let formData = new FormData();
    formData.append('photo', file);
    return await fetch('http://127.0.0.1:3333/api/v2/changeprofilepicture', {
      method: 'POST',
      body: formData,
      headers:  {Authorization: `Bearer ${token.token}` }
    });

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.