Flutter文件上传服务插件file_upload_service的使用

file_upload_service 是一个用于在 Flutter 应用中实现文件上传功能的插件。它简化了文件上传的过程，支持多种文件类型，并且可以轻松地与后端服务集成。以下是如何使用 file_upload_service 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 file_upload_service 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  file_upload_service: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 file_upload_service 插件。

import 'package:file_upload_service/file_upload_service.dart';

3. 初始化文件上传服务

在使用文件上传功能之前，你需要初始化 FileUploadService。

final fileUploadService = FileUploadService();

4. 选择文件

你可以使用 file_picker 插件来选择文件。首先，添加 file_picker 依赖：

dependencies:
  file_picker: ^4.0.0  # 请使用最新版本

然后导入并使用 file_picker 来选择文件：

import 'package:file_picker/file_picker.dart';

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

  if (result != null) {
    PlatformFile file = result.files.first;
    await uploadFile(file);
  } else {
    // 用户取消了文件选择
  }
}

5. 上传文件

使用 FileUploadService 来上传文件。你需要提供文件的路径、上传的 URL 以及任何必要的请求头或参数。

Future<void> uploadFile(PlatformFile file) async {
  try {
    final response = await fileUploadService.upload(
      filePath: file.path!,
      url: 'https://your-upload-url.com/upload',
      headers: {
        'Authorization': 'Bearer your_token',
      },
      parameters: {
        'userId': '123',
      },
    );

    if (response.statusCode == 200) {
      print('文件上传成功');
    } else {
      print('文件上传失败: ${response.statusCode}');
    }
  } catch (e) {
    print('上传过程中发生错误: $e');
  }
}

6. 处理上传进度

你可以监听文件上传的进度，以便在 UI 中显示进度条。

fileUploadService.upload(
  filePath: file.path!,
  url: 'https://your-upload-url.com/upload',
  onProgress: (int sent, int total) {
    double progress = sent / total;
    print('上传进度: $progress');
  },
);

7. 处理上传结果

上传完成后，你可以根据服务器的响应来处理结果。

final response = await fileUploadService.upload(
  filePath: file.path!,
  url: 'https://your-upload-url.com/upload',
);

if (response.statusCode == 200) {
  print('文件上传成功');
  print('服务器响应: ${response.body}');
} else {
  print('文件上传失败: ${response.statusCode}');
}

8. 错误处理

在上传过程中可能会发生错误，例如网络问题或文件格式不支持。你可以使用 try-catch 来捕获并处理这些错误。

try {
  final response = await fileUploadService.upload(
    filePath: file.path!,
    url: 'https://your-upload-url.com/upload',
  );
} catch (e) {
  print('上传过程中发生错误: $e');
}

9. 取消上传

如果你需要取消正在进行的上传操作，可以调用 cancel 方法。

fileUploadService.cancel();

10. 完整示例

以下是一个完整的示例，展示了如何选择文件并上传到服务器。

import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:file_upload_service/file_upload_service.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FileUploadScreen(),
    );
  }
}

class FileUploadScreen extends StatefulWidget {
  [@override](/user/override)
  _FileUploadScreenState createState() => _FileUploadScreenState();
}

class _FileUploadScreenState extends State<FileUploadScreen> {
  final fileUploadService = FileUploadService();

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

    if (result != null) {
      PlatformFile file = result.files.first;
      await uploadFile(file);
    } else {
      // 用户取消了文件选择
    }
  }

  Future<void> uploadFile(PlatformFile file) async {
    try {
      final response = await fileUploadService.upload(
        filePath: file.path!,
        url: 'https://your-upload-url.com/upload',
        headers: {
          'Authorization': 'Bearer your_token',
        },
        parameters: {
          'userId': '123',
        },
        onProgress: (int sent, int total) {
          double progress = sent / total;
          print('上传进度: $progress');
        },
      );

      if (response.statusCode == 200) {
        print('文件上传成功');
      } else {
        print('文件上传失败: ${response.statusCode}');
      }
    } catch (e) {
      print('上传过程中发生错误: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('文件上传示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: pickAndUploadFile,
          child: Text('选择文件并上传'),
        ),
      ),
    );
  }
}