Flutter文件上传插件dio_file_uploader的使用

Flutter 文件上传插件 dio_file_uploader 的使用

dio_file_uploader 是一个基于 dio 包处理文件上传的插件。它依赖于 en_file_uploader 包。更多关于 en_file_uploader 的信息可以在这里找到。

特性

  • 使用 DioFileHandler 处理文件上传；
  • 使用 DioChunkedFileHandler 分块处理文件上传；
  • 使用 DioRestorableChunkedFileHandler 分块处理文件上传，并且具有恢复上传的功能。

使用方法

  1. 创建一个新的 DioFileHandler, DioChunkedFileHandler 或 DioRestorableChunkedFileHandler 实例。
  2. 使用创建的处理器创建一个 FileUploadController。
  3. 调用 controller.upload 方法。

示例代码

import 'dart:convert';

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

void main() async {
  // 初始化 Dio 客户端
  final client = Dio();
  
  // 创建一个 Dart 文件对象
  final file = utils.createIoFile();

  // 设置请求的基本路径
  final baseRequestPath = "my-request";

  // 设置请求头
  final headers = {"Authorization": "Bearer XXX"};

  // 创建一个分块可恢复的文件上传处理器
  final restorableHandler = DioRestorableChunkedFileHandler(
    client: client,
    file: XFile(file.path), // 使用 XFile 对象
    presentMethod: "POST", // 上传文件的方法
    chunkMethod: "PATCH", // 上传文件分块的方法
    statusMethod: "HEAD", // 获取文件上传状态的方法
    presentPath: "$baseRequestPath", // 上传文件的路径
    chunkPath: (presentation, _) => "$baseRequestPath&patch=${presentation.id}", // 上传文件分块的路径
    statusPath: (presentation) => "$baseRequestPath&status=${presentation.id}", // 获取文件上传状态的路径
    presentHeaders: {
      "Upload-Length": file.lengthSync().toString(), // 设置文件大小
      ...headers, // 合并自定义头
    },
    chunkHeaders: (presentation, chunk) {
      return headers; // 返回分块头
    },
    statusHeaders: null,
    presentParser: (response) => FileUploadPresentationResponse(id: response.data), // 解析上传结果
    statusParser: (response) => FileUploadStatusResponse(nextChunkOffset: jsonDecode(response.data)), // 解析上传状态
    chunkSize: 1024 * 1024, // 每个分块的大小（1MB）
    presentBody: null,
    chunkBody: null,
    statusBody: null,
  );

  // 创建文件上传控制器
  final controller = FileUploadController(
    restorableHandler,
    logger: utils.PrintLogger(), // 日志记录器
  );

  // 开始上传文件
  await controller.upload();

  // 打印完成消息
  print("done!");
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用dio_file_uploader插件进行文件上传的示例代码。dio_file_uploader 是一个强大的插件，可以帮助你处理文件上传任务。

首先，确保你的Flutter项目中已经添加了dio_file_uploader依赖。在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0  # 确保dio版本与dio_file_uploader兼容
  dio_file_uploader: ^1.0.0  # 使用最新版本

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

接下来，编写Flutter代码进行文件上传。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:dio_file_uploader/dio_file_uploader.dart';
import 'dart:io';

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

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

class FileUploadScreen extends StatefulWidget {
  @override
  _FileUploadScreenState createState() => _FileUploadScreenState();
}

class _FileUploadScreenState extends State<FileUploadScreen> {
  final _dio = Dio();
  FileUploader? _uploader;

  @override
  void initState() {
    super.initState();
    // 配置上传器
    _uploader = FileUploader(
      dio: _dio,
      url: 'https://your-upload-server-url.com/upload', // 替换为你的上传服务器URL
      headers: {
        'Authorization': 'Bearer YOUR_ACCESS_TOKEN', // 如果需要身份验证，添加你的token
      },
      method: 'POST',
      maxRetries: 3,
      timeout: 30000, // 超时时间，单位毫秒
    );
  }

  @override
  void dispose() {
    _uploader?.cancelAll(); // 取消所有未完成的上传任务
    _dio.close(); // 关闭dio实例
    super.dispose();
  }

  Future<void> _uploadFile() async {
    final filePicker = FilePicker();
    final result = await filePicker.pickFiles(type: FileType.any);

    if (result != null && result.files.isNotEmpty) {
      final file = File(result.files.first.path!);
      final task = _uploader!.uploadFile(
        file: file,
        fieldName: 'file', // 服务器接收文件的字段名
        data: {
          'userId': '123456', // 你可以在这里添加其他需要上传的数据
        },
        onProgress: (progress, message) {
          // 上传进度回调
          print('Upload Progress: $progress%');
          print('Message: $message');
        },
        onCancel: () {
          // 上传取消回调
          print('Upload Cancelled');
        },
        onCompleted: (response, message) {
          // 上传完成回调
          print('Upload Completed');
          print('Response: $response');
          print('Message: $message');
        },
        onError: (error, message) {
          // 上传错误回调
          print('Upload Error: $error');
          print('Message: $message');
        },
      );

      // 开始上传
      await task.start();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('File Upload'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _uploadFile,
          child: Text('Upload File'),
        ),
      ),
    );
  }
}

注意：

  1. FilePicker 插件用于选择文件，你需要添加file_picker依赖并导入相应的包。
  2. 确保你已经替换了url字段中的URL为你的实际上传服务器地址。
  3. 根据你的需求调整headers、fieldName和data等字段。

这个示例代码展示了如何使用dio_file_uploader插件进行文件上传，并处理了上传进度、取消、完成和错误等回调。希望这对你有所帮助！

回到顶部