Flutter图片上传至Firebase插件firebase_picture_uploader的使用

Flutter Firebase Picture Uploader

flutter_firebase_picture_uploader 是一个用于将图片上传到 Firebase Storage 的 Flutter 插件。它提供了一个 PictureUploadWidget，可以用来上传一张或多张图片，并支持删除图片、自定义字体大小、颜色等功能。

功能特性

  • 通过 PictureUploadWidget 上传单张或多张图片
  • 通过 PictureUploadWidget 删除图片
  • 多种自定义选项（字体大小、文本、颜色等）
  • 支持自定义上传或下载方法

前提条件

在使用此插件之前，您需要：

  1. 将 Firebase 添加到您的项目中。例如，在 iOS 中，将 GoogleService-Info.plist 文件复制到 ios/Runner/ 目录下。
  2. 配置 image_picker 插件，具体步骤请参考 image_picker 文档。

快速使用

示例代码

以下是一个完整的示例 demo，展示了如何使用 PictureUploadWidget 来上传图片。

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_picture_uploader/firebase_picture_uploader.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

  await Firebase.initializeApp();

  runApp(ExampleApp());
}

class ExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  [@override](/user/override)
  _MyHomeState createState() => new _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  List<UploadJob>? _profilePictures = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    final profilePictureTile = new Material(
      color: Colors.transparent,
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          const Text('Profile Picture',
              style: TextStyle(
                color: CupertinoColors.systemBlue,
                fontSize: 15.0,
              )),
          const Padding(
            padding: EdgeInsets.only(bottom: 5.0),
          ),
          PictureUploadWidget(
            initialImages: _profilePictures,
            onPicturesChange: profilePictureCallback,
            buttonStyle: PictureUploadButtonStyle(),
            buttonText: 'Upload Picture',
            localization: PictureUploadLocalization(),
            settings: PictureUploadSettings(
                // customDeleteFunction: ProfileController.deleteProfilePicture,
                // customUploadFunction: RecipeController.uploadRecipePicture,
                imageSource: ImageSourceExtended.askUser,
                minImageCount: 0,
                maxImageCount: 5,
                imageManipulationSettings: const ImageManipulationSettings(
                    enableCropping: true, compressQuality: 75)),
            enabled: true,
          ),
        ],
      ),
    );

    return new Scaffold(
      body: Padding(
          padding: const EdgeInsets.fromLTRB(20, 100, 20, 50),
          child: Column(children: <Widget>[profilePictureTile])),
    );
  }

  void profilePictureCallback(
      {List<UploadJob>? uploadJobs, bool? pictureUploadProcessing}) {
    _profilePictures = uploadJobs;
  }
}

更多关于Flutter图片上传至Firebase插件firebase_picture_uploader的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片上传至Firebase插件firebase_picture_uploader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用firebase_picture_uploader插件将图片上传至Firebase的示例代码。请注意，这个插件并非Firebase官方提供的插件，而是一个社区开发的插件，因此其功能和API可能会有所不同。这里假设你已经设置好了Firebase项目，并且已经在Flutter项目中添加了所有必要的依赖。

首先，确保你的pubspec.yaml文件中包含了firebase_core、firebase_storage以及firebase_picture_uploader（如果这是一个存在的插件，注意检查其实际名称和版本）：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.x.x  # 使用最新版本
  firebase_storage: ^10.x.x  # 使用最新版本
  firebase_picture_uploader: ^x.x.x  # 假设这是插件的实际名称和版本，请根据实际情况替换

然后运行flutter pub get来安装这些依赖。

接下来，配置Firebase。在你的android/app/google-services.json和ios/Runner/GoogleService-Info.plist文件中，确保已经包含了你的Firebase项目配置。

然后，在你的Flutter代码中，你需要初始化Firebase应用，并使用firebase_picture_uploader插件来上传图片。以下是一个示例代码：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:firebase_picture_uploader/firebase_picture_uploader.dart' as uploader; // 假设插件的import路径是这样的

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UploadPage(),
    );
  }
}

class UploadPage extends StatefulWidget {
  @override
  _UploadPageState createState() => _UploadPageState();
}

class _UploadPageState extends State<UploadPage> {
  final picker = ImagePicker();
  File? _imageFile;

  Future<void> _pickImage() async {
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });

      // 使用firebase_picture_uploader上传图片
      // 注意：这里的API调用是假设的，具体请参考插件的文档
      uploader.uploadImageToFirebase(_imageFile!, 'images/my_image.jpg').then((url) {
        print('Image uploaded successfully: $url');
      }).catchError((error) {
        print('Error uploading image: $error');
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Upload Image to Firebase'),
      ),
      body: Center(
        child: _imageFile == null
            ? Text('No image selected.')
            : Image.file(_imageFile!),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

注意：

  1. 上面的代码示例是基于假设firebase_picture_uploader插件提供了一个名为uploadImageToFirebase的方法。实际上，你可能需要查看该插件的文档来了解其具体的API调用方式。
  2. ImagePicker插件用于从设备的图库中选择图片，你需要确保在pubspec.yaml文件中也添加了image_picker依赖。
  3. 由于firebase_picture_uploader并非官方插件，其功能、API和稳定性可能不如官方插件。如果找不到这个插件或者其API与预期不符，你可能需要手动实现图片上传逻辑，使用firebase_storage插件来上传图片到Firebase Storage。

如果你需要手动实现图片上传，可以参考Firebase Storage的官方文档和示例代码。

回到顶部