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 7668 veces | 0 usuarios

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

26 descargas

Para descargar el código crea una cuenta

Crear cuenta

Compartir link del tutorial con tus amigos


Más tutoriales de Flutter

Codea Applications

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

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024