Inicio » Blog » Flutter

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

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 6909 veces

Descarga el código fuente Flutter

Recurso descargado 26 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Aprende más sobre Flutter

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023