Больше
Как использовать Uint8List в Flutter и сохранять его на сервере с помощью Back4app

12min
Введение
В цифровых системах файлы часто представляются в виде последовательности байтов, и Dart предоставляет эффективный способ работы с байтовыми данными с помощью Uint8List. Uint8List — это список фиксированной длины беззнаковых 8-битных целых чисел, что означает, что каждое число находится в диапазоне от 0 до 255. Эта структура полезна для работы с двоичными данными, такими как изображения или файлы, где важна эффективность использования памяти.
В этом учебном пособии мы рассмотрим, как работать с Uint8List в Flutter, конвертировать файлы в байтовые списки и сохранять данные в бэкенде Back4app с использованием Parse SDK для Flutter.
Предварительные требования
Перед началом убедитесь, что у вас есть следующее:
Аккаунт Back4app. Зарегистрируйтесь для получения бесплатного аккаунта на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter, если вы еще не настроили её.
Базовые знания Dart, виджетов Flutter и использования Back4app для бэкенд-сервисов.
Шаг 1 – Настройка вашего бэкенда Back4app
Создайте проект Back4app: Войдите в свой аккаунт Back4app и создайте новый проект.
Создайте классы Parse: Для этого учебного пособия создайте класс Parse с именем FileStorage для хранения двоичных данных:
filename (String): Имя файла.
fileData (File): Двоичные данные файла.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш Application ID и Client Key, которые вам понадобятся для подключения вашего приложения Flutter к Back4app.
Шаг 2 – Настройка проекта Flutter
Создайте новый проект Flutter: Откройте ваш терминал или командную строку и выполните:
Bash
flutter create uint8list_example
flutter create uint8list_example
﻿
Добавьте зависимости: Откройте pubspec.yaml и добавьте следующие зависимости:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
﻿
Запустите flutter pub get для установки этих зависимостей.
Инициализируйте Parse в вашем приложении: В lib/main.dart, инициализируйте SDK Parse:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Uint8ListExample(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Uint8ListExample(),
    );
  }
}
﻿
Замените 'YOUR_BACK4APP_APP_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши реальные учетные данные Back4app.
Шаг 3 – Работа с Uint8List в Flutter
Выбор и чтение файла: Используйте пакет file_picker для выбора файла с устройства и преобразования его в Uint8List:
Dart
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
﻿
Этот код позволяет пользователю выбрать файл, читает файл как Uint8List, и отображает имя файла и кнопку для его сохранения.
Шаг 4 – Сохранение Uint8List в Back4app
Чтобы сохранить файл в Back4app, мы используем объект ParseFile, который позволяет загружать двоичные данные, такие как изображения или документы.
Сохранение файла в Back4app: Обновите метод _saveToBackend, чтобы сохранить выбранный файл в Back4app:
Dart
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
﻿
Этот метод загружает файл как двоичные данные в Back4app, используя ParseFile. Если успешно, он отображает сообщение с подтверждением.
Шаг 5 – Запуск приложения
Запустите ваше приложение с помощью flutter run. Вы должны увидеть кнопку для выбора файла, а затем опцию для его сохранения на сервере после выбора.
Проверьте данные в Back4app войдя в свою панель управления Back4app и проверив класс FileStorage. Вы должны увидеть сохраненный файл вместе с его именем.
Лучшие практики для хранения двоичных данных
При работе с Uint8List и двоичными данными, вот несколько лучших практик:
Используйте : ParseFile от Back4app — это эффективный способ хранения и извлечения двоичных данных, таких как изображения, видео и документы.
Избегайте хранения больших файлов непосредственно в объектах Parse: Если ваши файлы большие, рассмотрите возможность использования службы хранения, такой как AWS S3, и храните URL файла в вашем объекте Parse вместо самого файла.
Сжатие и оптимизация: Для больших изображений или файлов рассмотрите возможность сжатия файла перед загрузкой, чтобы улучшить производительность.
Заключение
В этом руководстве мы рассмотрели, как работать с Uint8List в Flutter, конвертировать файлы в списки байтов и сохранять эти данные в Back4app с использованием Parse SDK. Uint8List предоставляет эффективный с точки зрения памяти способ обработки байтовых данных в Dart, что делает его подходящим для операций с файлами, таких как загрузка изображений, хранение документов и многое другое. Интеграция с Back4app позволяет вам легко хранить и управлять двоичными данными в облаке.
Для получения дополнительной информации посетите документацию Flutter и документацию Back4app. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Понимание сопоставления шаблонов в Flutter с использованием Back4app как бэкенда
Создание выпадающих меню в Flutter с данными из Back4app