Flutter网页图片选择插件image_picker_web_totalxsoftware的使用

Flutter网页图片选择插件image_picker_web_totalxsoftware的使用

由 Totalx 软件公司 开发

ImagePickerWebTotalxsoftware 是一个用于从用户设备选择图片并上传到 Firebase Storage 的 Flutter Web 插件。该插件提供了多种方法来选择单个或多个图片，并直接上传到 Firebase。

目录

• 功能
• 前置条件
• 安装
• 方法
  • 1. 选择图片 (pickImage)
  • 2. 选择多张图片 (pickMultipleImages)
  • 3. 选择并上传到 Firebase (pickAndUploadToFirebase)
  • 4. 选择多张并上传到 Firebase (pickMultipleAndUploadToFirebase)
• 示例用法

功能

• 单张图片选择: 从设备中选择一张图片。
• 多张图片选择: 选择多张图片，支持大小和数量限制。
• Firebase 上传: 直接将所选图片上传到 Firebase 存储。
• 错误处理: 自定义错误消息，用于处理过大的图片和上传问题。

前置条件

1. 在你的 Flutter Web 项目中初始化 Firebase。参考 Firebase 设置指南。
2. 将 image_picker_web_totalxsoftware 添加到项目的 pubspec.yaml 文件中：

dependencies:
  image_picker_web_totalxsoftware:

安装

要使用此包，在 Dart 文件中导入它：

import 'package:image_picker_web_totalxsoftware/image_picker_web_totalxsoftware.dart';

方法

1. 选择图片 (pickImage)

从用户的设备中选择一张图片，并检查是否超过指定的大小限制。

// Uint8List
final image = await ImagePickerWebTotalxsoftware.pickImage(
  maxImageSizeKB: 200,
  onError: (error) {
    print('Error: $error');
  },
);

参数

• maxImageSizeKB: 最大图片大小（默认为 200 KB）。
• onError: 错误处理回调函数。

返回值

• 返回 Uint8List 类型的图片，或在失败时返回 null。

2. 选择多张图片 (pickMultipleImages)

允许用户选择多张图片，并验证每张图片是否符合指定的大小和数量限制。

// List<Uint8List>
final images = await ImagePickerWebTotalxsoftware.pickMultipleImages(
  maxImageSizeKB: 200,
  maxImageCount: 5,
  onError: (error) {
    print('Error: $error');
  },
);

参数

• maxImageSizeKB: 每张图片的最大大小（默认为 200 KB）。
• maxImageCount: 允许选择的最大图片数量。
• onError: 错误处理回调函数。

返回值

• 返回包含 Uint8List 对象的列表，或在失败时返回 null。

3. 选择并上传到 Firebase (pickAndUploadToFirebase)

选择一张图片，验证后将其上传到 Firebase 存储。

// String url
final url = await ImagePickerWebTotalxsoftware.pickAndUploadToFirebase(
  maxImageSizeKB: 200,
  storagePath: 'products',
  format: UploadImageFormat.webp,
  onError: (error) {
    print('Error: $error');
  },
);

参数

• maxImageSizeKB: 最大图片大小（默认为 200 KB）。
• storagePath: 图片在 Firebase 存储中的路径。
• format: 图片格式（webp 或 jpeg）。
• onError: 错误处理回调函数。

返回值

• 返回已上传图片的 URL，或在失败时返回 null。

4. 选择多张并上传到 Firebase (pickMultipleAndUploadToFirebase)

允许用户选择多张图片，验证后将它们上传到 Firebase 存储。

final urls = await ImagePickerWebTotalxsoftware.pickMultipleAndUploadToFirebase(
  maxImageSizeKB: 200,
  maxImageCount: 5,
  storagePath: 'products',
  format: UploadImageFormat.webp,
  onError: (error) {
    print('Error: $error');
  },
);

参数

• maxImageSizeKB: 每张图片的最大大小（默认为 200 KB）。
• maxImageCount: 允许选择的最大图片数量。
• storagePath: 图片在 Firebase 存储中的路径。
• format: 图片格式（webp 或 jpeg）。
• onError: 错误处理回调函数。

返回值

• 返回包含已上传图片 URL 的列表，或在失败时返回 null。

示例用法

以下是一个 Flutter 应用程序示例，演示了如何使用上述方法：

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:image_picker_web_totalxsoftware/image_picker_web_totalxsoftware.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('图片选择器 & Firebase 存储')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () async {
                  final image = await ImagePickerWebTotalxsoftware.pickImage(
                    maxImageSizeKB: 200,
                    onError: (error) => print('Error: $error'),
                  );
                  print(image);
                },
                child: const Text('选择图片'),
              ),
              ElevatedButton(
                onPressed: () async {
                  final images = await ImagePickerWebTotalxsoftware.pickMultipleImages(
                    maxImageSizeKB: 200,
                    maxImageCount: 5,
                    onError: (error) => print('Error: $error'),
                  );
                  print(images);
                },
                child: const Text('选择多张图片'),
              ),
              ElevatedButton(
                onPressed: () async {
                  final url = await ImagePickerWebTotalxsoftware.pickAndUploadToFirebase(
                    maxImageSizeKB: 200,
                    storagePath: 'products',
                    format: UploadImageFormat.webp,
                    onError: (error) => print('Error: $error'),
                  );
                  print(url);
                },
                child: const Text('选择并上传到 Firebase'),
              ),
              ElevatedButton(
                onPressed: () async {
                  final urls = await ImagePickerWebTotalxsoftware.pickMultipleAndUploadToFirebase(
                    maxImageSizeKB: 200,
                    maxImageCount: 5,
                    storagePath: 'products',
                    format: UploadImageFormat.webp,
                    onError: (error) => print('Error: $error'),
                  );
                  print(urls);
                },
                child: const Text('选择多张并上传到 Firebase'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}