Inicio » Blog »

14 abril, 2021

Subir una imagen en Flutter con Laravel

Para enviar una imagen al servidor web debemos encodear a 64, preparar un servicio web el cual enviará y obtendrá una respuesta del servidor web

Subir una imagen en Flutter con Laravel

Suscríbete a nuestro canal en Youtube

Suscríbirse

Para enviar una imagen al servidor web debemos encodear a 64, preparar un servicio web el cual enviará y obtendrá una respuesta del servidor web

En este caso práctico intentaremos enviar una imagen y un dato de tipo texto al servidor web mediante una API rest por tanto tambien tenemos que implementar un servicio web para enviar y recibir datos por http.

import 'dart:convert';
import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'servicio.dart';
void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: pagina(),
    );
  }
}

class pagina extends StatefulWidget {
  @override
  _paginaState createState() => _paginaState();
}

class _paginaState extends State<pagina> {
  TextEditingController _dato = TextEditingController();
  String _ruta ;
  String _image64;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            TextField( controller: _dato,),
            (_ruta == null ) ? Container() : Image.file(File(_ruta),width: 200,),
            RaisedButton(
              child: Text("CARGAR IMAGEN"),
                onPressed: () async {
                final ImagePicker _picker = ImagePicker();
                PickedFile _archivo = await _picker.getImage(source: ImageSource.gallery);
....

                setState(() {
                  _ruta =_archivo.path;
                });
            }),
            /// enviar al servidor web
            RaisedButton(
              child: Text("ENVIAR AL SERVIDOR"),
                onPressed: (){
              _enviarform();
            })
          ],
        ),
      ),
    );
  }
  void _enviarform() async{
    var data ={
      'dato' : _dato,
      'imagen' : _image64
    };

   ....
  }
}

Laravel

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\File;

use Illuminate\Http\Request;

class ImagenController extends Controller
{
    public function index(Request $request){
        if($request!= null):
            $dato   =   $request->dato;
            $image  =   $request->imagen64;  // your base64 encoded
            $image = str_replace('data:image/png;base64,', '', $image);
            $image = str_replace(' ', '+', $image);
            $imageName = time().'.png';
            .....

            $data = [
                'success' => true,
                'mensaje' => $imageName
            ];
        else:
            $data = [
                'success' => false,
                'mensaje' => "fallo el proceso"
            ];
        endif;

        return response()->json($data, 200);


    }

}

 


Leido 8072 veces | 0 usuarios

Descarga del código fuente Flutter de Subir una imagen en Flutter con Laravel

Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.

Opciones de descarga

  • Usuarios Registrados: Inicia sesión para descarga inmediata.
  • Nuevos Usuarios: Regístrate y descarga.

26 descargas

Para descargar el código inicia sesión o crea una cuenta

Iniciar Sesión

Compartir link del tutorial con tus amigos


Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú