Flutter文件上传进度管理插件supabase_progress_uploads的使用

Flutter文件上传进度管理插件supabase_progress_uploads的使用

插件介绍

supabase_progress_uploads 是一个用于在Flutter中轻松将文件上传到Supabase存储并跟踪进度的插件。它支持单个和多个文件上传，并且提供了暂停、恢复和取消上传的功能。

安装插件

首先，你需要在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  supabase_progress_uploads: ^1.0.0

初始化上传服务

初始化上传服务时，需要提供Supabase客户端实例和目标存储桶名称。

final supabase = Supabase.instance.client;
final uploadService = SupabaseUploadService(supabase, 'your_bucket_name');

单个文件上传

可以使用 uploadFile 方法来上传单个文件，并通过回调函数跟踪上传进度。

String? url = await uploadService.uploadFile(
  file,
  onUploadProgress: (progress) {
    print('Upload progress: ${progress}%');
  },
);
print('Uploaded file URL: $url');

多个文件上传

同样可以使用 uploadMultipleFiles 方法来上传多个文件，并通过回调函数跟踪总进度。

List<String?> urls = await uploadService.uploadMultipleFiles(
  files,
  onUploadProgress: (progress) {
    print('Total upload progress: ${progress}%');
  },
);
print('Uploaded files URLs: $urls');

使用 SupabaseUploadController 直接控制上传过程

对于更精细的控制，可以直接使用 SupabaseUploadController。

final controller = SupabaseUploadController(supabase, 'your_bucket_name');

int fileId = await controller.addFile(file);
controller.startUpload(
  fileId,
  onUploadProgress: (progress) {
    print('Upload progress: ${progress}%');
  },
);
String? url = await controller.getUploadedUrl(fileId);
print('Uploaded file URL: $url');

暂停、恢复和取消上传

可以通过调用相应的方法来控制上传状态。

controller.pauseUpload(fileId);
controller.resumeUpload(fileId);
await controller.cancelUpload(fileId);

示例代码

下面是一个完整的示例代码，展示了如何使用 supabase_progress_uploads 插件进行文件上传操作。

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:supabase_progress_uploads/supabase_progress_uploads.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: UploadExample());
  }
}

class UploadExample extends StatefulWidget {
  const UploadExample({super.key});

  [@override](/user/override)
  _UploadExampleState createState() => _UploadExampleState();
}

class _UploadExampleState extends State<UploadExample> {
  final ImagePicker _picker = ImagePicker();
  late SupabaseUploadService _uploadService;
  late SupabaseUploadController _uploadController;
  double _singleProgress = 0.0;
  double _multipleProgress = 0.0;

  [@override](/user/override)
  void initState() {
    super.initState();
    final supabase = Supabase.instance.client;
    supabase.auth.signInAnonymously();
    _uploadService = SupabaseUploadService(supabase, 'your_bucket_name');
    _uploadController = SupabaseUploadController(supabase, 'your_bucket_name');
  }

  Future<void> _uploadSingleFile() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      String? url = await _uploadService.uploadFile(
        image,
        onUploadProgress: (progress) {
          setState(() { _singleProgress = progress; });
        },
      );
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('File Uploaded')));
      print('Uploaded file URL: $url');
    }
  }

  Future<void> _uploadMultipleFiles() async {
    final List<XFile> images = await _picker.pickMultiImage();
    if (image.isNotEmpty) {
      List<String?> urls = await _uploadService.uploadMultipleFiles(
        image,
        onUploadProgress: (progress) {
          setState(() { _multipleProgress = progress; });
        },
      );

      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Files Uploaded')));
      print('Uploaded files URLs: $urls');
    }
  }

  Future<void> _uploadWithController() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      int fileId = await _uploadController.addFile(image);
      _uploadController.startUpload(
        fileId,
        onUploadProgress: (progress) {
          setState(() { _singleProgress = progress; });
        },
      );
      String? url = await _uploadController.getUploadedUrl(fileId);
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('File Uploaded')));
      print('Uploaded file URL: $url');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Supabase Upload Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _uploadSingleFile,
              child: const Text('Upload Single File'),
            ),
            Text('Single Progress: ${(_singleProgress).toStringAsFixed(2)}%'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _uploadMultipleFiles,
              child: const Text('Upload Multiple Files'),
            ),
            Text('Multiple Progress: ${(_multipleProgress).toStringAsFixed(2)}%'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _uploadWithController,
              child: const Text('Upload with Controller'),
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _uploadService.dispose();
    super.dispose();
  }
}