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

Video Enviar una imagen al servidor con Flutter
SUSCRÍBETE A NUESTRO CANAL SÍGUENOS EN FACEBOOK

¿Cómo subir una imagen en Flutter a un servidor web?

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);


    }

}

 

¿Quieres descargar el código fuente Subir una imagen en Flutter con Laravel?
...por favor suscríbete gratuitamente para descargarlo

Flutter Laravel

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 488 veces | Publicado hace 4 semanas

Curso Flutter y Laravel App de Turismo

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021