La carga de archivos desde un sistema local al servidor dedicado se denomina carga de archivos y la recuperación de archivos desde el servidor dedicado a un sistema local se denomina recuperación de archivos. Funciona exactamente igual que la definición cuando seleccionamos un archivo del dispositivo Android y hacemos clic en el botón Enviar, el dispositivo Android toma el archivo del almacenamiento local y lo envía al servidor con la ayuda de una solicitud Http y el servidor lo hace. su trabajo para guardar el archivo en la ubicación definida. En este artículo, demostramos cómo los archivos de imagen se almacenan y recuperan en la base de datos del clúster MongoDB Atlas junto con la compresión del tamaño de las imágenes de Megabytes (MB) a Kilobytes (KB) con la ayuda del complemento flutter_image_compress .
Requisito previo: para comenzar con esto, una persona debe estar familiarizada con lo siguiente
- Aleteo
- Dardo
- MongoDB
- dardo mongo
Aquí, estamos creando una aplicación de Android para demostrar el uso de MongoDB en la aplicación Flutter. Para comenzar, necesitamos instalar ciertos paquetes y complementos de Flutter y Android Studio debe estar instalado en el sistema local.
Antes de comenzar , se debe instalar el kit de herramientas de desarrollo de Flutter en el sistema local y el complemento de Flutter en Android Studio IDE .
- Abra Android Studio y cree un nuevo proyecto de aplicación flutter con un nombre llamado ‘geeksforgeeks’ .
- Una vez que el proyecto se haya creado y sincronizado correctamente, conecte su dispositivo Android a Android Studio y asegúrese de que las opciones de desarrollador y la depuración de USB estén activadas.
- Ejecute el proyecto haciendo clic en el primer ícono verde en la parte superior central para verificar que el proyecto esté construido y funcionando correctamente (la primera vez que Android Studio toma un poco más de tiempo como de costumbre).
- Ahora es el momento de instalar los paquetes y complementos necesarios, abrir el archivo ‘pubspec.yaml’ desde geeksforgeeks -> estructura del proyecto pubspec.yaml y copiar y pegar tres dependencias que son image_picker , flutter_image_compress y mongo_dart de la siguiente manera.
dependencies:
image_picker: ^0.6.7+7
flutter_image_compress: ^0.7.0
mongo_dart:
git:
url: https://github.com/mongo-dart/mongo_dart.git
- Una vez que haya realizado los pasos anteriores, haga clic en el comando flutter ‘Packets get’ que aparece en la parte superior central para instalar todos los paquetes y complementos necesarios.
Para cargar y recuperar una imagen en MongoDB usando Dart en flutter, comencemos, siga todos y cada uno de los pasos a continuación, uno por uno.
Paso 1:
Dado que toda esta aplicación está construida en la parte superior del teléfono inteligente Android, por lo tanto, no será posible conectarse con la base de datos MongoDB local, por eso aquí, usaremos la base de datos del clúster MongoDB , y para conectarnos con la base de datos del clúster, todo lo que necesitamos réplicas ‘ URI.
- Regístrese o inicie sesión en la cuenta de MongoDB y cree una base de datos con cualquier nombre personalizado.
- Para obtener estas réplicas de Atlas, vaya a ‘Conectar’ -> ‘Conectar con Shell’ -> ‘Tengo Mongo Shell instalado’ -> configure su versión a 3.4 o anterior.
- Si tiene 3 réplicas, tendrá 3 URL divididas con comas como se muestra a continuación.
Dart
final url = [ "mongodb://<username>:<password>@<hostname1>:27017/<DBName>?ssl=true& replicaSet=<MySet>&authSource=admin&retryWrites=true&w=majority", "mongodb://<username>:<password>@<hostname2>:27017/<DBName>?ssl=true& replicaSet=<MySet>&authSource=admin&retryWrites=true&w=majority", "mongodb://<username>:<password>@<hostname3>:27017/<DBName>?ssl=true& replicaSet=<MySet>&authSource=admin&retryWrites=true&w=majority" ];
Paso 2:
Para comenzar con la conexión de la base de datos, dado que Atlas ahora solo permite conexiones SSL, necesitaremos la fuente de TLS/SSL para abrir una conexión segura. A la instrucción Db.pool() tendremos que pasar cada una de estas URL precedidas por mongodb:// , seguidas de /test?authSource=[auth db (probablemente ‘admin’)] podemos ver un ejemplo de réplicas’ URI en el paso anterior.
Dart
Future connection () async{
Db _db = new Db.pool(url);
await _db.open(secure: true);
GridFS bucket = GridFS(_db,"image");
}
Paso 3:
Una vez que hayamos establecido una conexión con la base de datos del clúster MongoDB, ahora podemos comenzar a definir nuestra lógica de back-end. Dado que cargar y recuperar una imagen de gran tamaño lleva mucho tiempo y, a veces, conlleva una serie de problemas como, por ejemplo, adquirir más espacio, más costoso, más tiempo de acceso y más sobrecarga de datos, por lo tanto, en este paso estamos comprimiendo el tamaño. de una imagen de MB a KB manteniendo la relación de aspecto.
Dart
final pickedFile = await picker.getImage(source: ImageSource.gallery);
if(pickedFile!=null){
var _cmpressed_image;
try {
_cmpressed_image = await FlutterImageCompress.compressWithFile(
pickedFile.path,
format: CompressFormat.heic,
quality: 70
);
} catch (e) {
_cmpressed_image = await FlutterImageCompress.compressWithFile(
pickedFile.path,
format: CompressFormat.jpeg,
quality: 70
);
}
}
Paso 4:
Ahora, este es el cuarto y último paso aquí, construiremos consultas para cargar y recuperar imágenes en MongoDB, por lo tanto, base de datos de clúster. Dado que MongoDB admite el formato de datos similar a JSON (es decir, par clave-valor), por lo tanto, tendremos que crear un Hashmap con dos pares clave-valor que son ‘ _id’ y ‘data’ para almacenar la identificación única de la imagen y los datos de píxeles de la imagen, respectivamente.
Dart
Map<String,dynamic> image = {
"_id" : pickedFile.path.split("/").last,
"data": base64Encode(_cmpressed_image)
};
var res = await bucket.chunks.insert(image);
var img = await bucket.chunks.findOne({
"_id": pickedFile.path.split("/").last
});
Ahora, es hora de mostrar el enfoque completo, abra el archivo ‘main.dart’ desde geeksforgeeks -> lib -> estructura del directorio del proyecto main.dart y copie y pegue siguiendo el código completo.
Dart
import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';
import 'package:mongo_dart/mongo_dart.dart' show Db, GridFS;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Geeks Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'GeeksforGeeks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
final url = [
"mongodb://<username>:<password>@<hostname1>:27017/<DBName>?ssl=true&
replicaSet=<MySet>&authSource=admin&retryWrites=true&w=majority",
"mongodb://<username>:<password>@<hostname2>:27017/<DBName>?ssl=true&
replicaSet=<MySet>&authSource=admin&retryWrites=true&w=majority",
"mongodb://<username>:<password>@<hostname3>:27017/<DBName>?ssl=true&
replicaSet=<MySet>&authSource=admin&retryWrites=true&w=majority"
];
final picker = ImagePicker();
File _image;
GridFS bucket;
AnimationController _animationController;
Animation<Color> _colorTween;
ImageProvider provider;
var flag = false;
@override
void initState() {
_animationController = AnimationController(
duration: Duration(milliseconds: 1800),
vsync: this,
);
_colorTween = _animationController.drive(ColorTween(begin: Colors.green, end: Colors.deepOrange));
_animationController.repeat();
super.initState();
connection();
}
Future getImage() async{
final pickedFile = await picker.getImage(source: ImageSource.gallery);
if(pickedFile!=null){
var _cmpressed_image;
try {
_cmpressed_image = await FlutterImageCompress.compressWithFile(
pickedFile.path,
format: CompressFormat.heic,
quality: 70
);
} catch (e) {
_cmpressed_image = await FlutterImageCompress.compressWithFile(
pickedFile.path,
format: CompressFormat.jpeg,
quality: 70
);
}
setState(() {
flag = true;
});
Map<String,dynamic> image = {
"_id" : pickedFile.path.split("/").last,
"data": base64Encode(_cmpressed_image)
};
var res = await bucket.chunks.insert(image);
var img = await bucket.chunks.findOne({
"_id": pickedFile.path.split("/").last
});
setState(() {
provider = MemoryImage(base64Decode(img["data"]));
flag = false;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.green,
),
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
SizedBox(
height: 20,
),
provider == null ? Text('No image selected.') : Image(image: provider,),
SizedBox(height: 10,),
if(flag==true)
CircularProgressIndicator(valueColor: _colorTween),
SizedBox(height: 20,),
RaisedButton(
onPressed: getImage,
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Colors.green,
Colors.green[200],
Colors.green[900],
],
),
),
padding: const EdgeInsets.all(10.0),
child: const Text(
'Select Image',
style: TextStyle(fontSize: 20)
),
),
),
],
),
)
)
);
}
Future connection () async{
Db _db = new Db.pool(url);
await _db.open(secure: true);
bucket = GridFS(_db,"image");
}
}
Finalmente, ejecute el proyecto haciendo clic en el primer ícono verde en la parte superior central para ver el resultado, y su trabajo estará listo.
Producción:
Publicación traducida automáticamente
Artículo escrito por RadheTians y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA