Flutter文件上传插件en_file_uploader的使用

文件上传插件简介

en_file_uploader 是一个用于Flutter应用程序的Dart包，提供了一个实现方式无关的文件上传功能。该库支持多种特性，如完整文件上传、分块上传以及可恢复的分块上传等，并且可以与不同的HTTP请求库（如http或dio）配合使用，提供了统一且简单的文件上传接口。此外，它还支持Web平台。

主要特性

• ☑ 上传完整的文件；
• ☑ 分块上传文件；
• ☑ 支持暂停和恢复的分块上传（可恢复的分块文件上传）。

插件支持

目前有以下两个插件实现了基于不同HTTP库的文件上传：

• http_file_uploader：通过http库实现文件上传。
• dio_file_uploader：通过dio库实现文件上传。

同时，flutter_file_uploader为用户提供了一组基于en_file_uploader的UI组件来管理和显示文件上传进度。

使用示例

下面是一个完整的示例代码，演示了如何使用en_file_uploader进行文件上传：

示例代码

import 'package:en_file_uploader/en_file_uploader.dart';
import 'package:file_uploader_utils/file_uploader_utils.dart' as utils;

/// 模拟后端服务
final backend = utils.InMemoryBackend();

void main() async {
  // 清除模拟后端中的所有数据
  backend.clear();

  // 创建并上传第一个文件
  var sampleFile1 = utils.createFile(fileName: 'test1.txt');
  var handler1 = ExampleRestorableChunkedFileUploadHandler(
    file: sampleFile1,
    chunkSize: 500, // 每个分块大小为500字节
  );
  var controller1 = FileUploadController(handler1);
  await controller1.upload(); // 开始上传

  // 创建并上传第二个文件
  var sampleFile2 = utils.createFile(fileName: 'test2.txt');
  var handler2 = ExampleRestorableChunkedFileUploadHandler(
    file: sampleFile2,
    chunkSize: 1000, // 每个分块大小为1000字节
  );
  var controller2 = FileUploadController(handler2);
  await controller2.upload(); // 开始上传

  // 打印模拟后端中的内容以验证上传结果
  print(backend);
}

/// 实现了[RestorableChunkedFileUploadHandler]接口的自定义处理器类
class ExampleRestorableChunkedFileUploadHandler extends RestorableChunkedFileUploadHandler {
  /// 构造函数
  ExampleRestorableChunkedFileUploadHandler({
    required super.file,
    super.chunkSize,
  });

  @override
  Future<FileUploadPresentationResponse> present() {
    // 向模拟后端提交文件信息并获取唯一标识符
    final id = backend.handleIncomingFile();
    return Future.value(FileUploadPresentationResponse(id: id));
  }

  @override
  Future<FileUploadStatusResponse> status(
      FileUploadPresentationResponse presentation) {
    // 查询模拟后端中指定文件的状态（即下一个待发送分块的位置）
    final offset = backend.nextFileOffset(presentation.id);
    return Future.value(
      FileUploadStatusResponse(nextChunkOffset: offset),
    );
  }

  @override
  Future<void> uploadChunk(
      FileUploadPresentationResponse presentation,
      FileChunk chunk, {
        ProgressCallback? onProgress,
      }) async {
    // 将当前分块的数据写入到模拟后端中
    final chunkData = (await chunk.file.readAsBytes()).sublist(chunk.start, chunk.end);
    backend.addChunk(presentation.id, chunkData);
    return Future.value();
  }
}

此代码片段展示了如何创建一个基于内存的模拟后端，然后使用ExampleRestorableChunkedFileUploadHandler来处理两个不同文件的上传过程。每个文件都按照设定的分块大小被分割成多个部分依次上传至模拟后端。最后，通过打印backend对象的内容来检查上传是否成功完成。

注意事项

1. 在实际应用中，您需要替换utils.InMemoryBackend()为真实的服务器API接口。
2. chunkSize参数可以根据网络状况和个人需求调整。
3. 对于生产环境，请确保对错误情况进行适当的捕获和处理。

希望这段详细的解释和示例代码能够帮助您更好地理解和使用en_file_uploader插件！如果您有任何问题或需要进一步的帮助，请随时提问。