Subir una imagen en Flutter con Laravel

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

Video Enviar una imagen al servidor con Flutter

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

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


    }

}

 

Para descargar el recurso de forma gratuita { crea una cuenta } gratis .

Descarga código fuente

ENTRAR PARA DESCARGAR 4

Redactado por: , Leido 2258 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021