Flutter文件上传插件http_file_uploader的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter文件上传插件http_file_uploader的使用

http_file_uploader是一个用于处理文件上传的Flutter插件,它依赖于en_file_uploader包和http包。该插件提供了三种主要的文件上传方式:普通上传、分块上传以及可恢复的分块上传。

主要功能

  • 使用HttpFileHandler进行文件上传。
  • 使用HttpChunkedFileHandler进行分块上传。
  • 使用HttpRestorableChunkedFileHandler进行具有恢复能力的分块上传。

使用步骤

  1. 创建一个HttpFileHandler, HttpChunkedFileHandlerHttpRestorableChunkedFileHandler的新实例。
  2. 使用创建的处理器初始化FileUploadController
  3. 调用controller.upload()方法开始上传。

示例代码

下面是一个完整的示例,演示了如何使用HttpRestorableChunkedFileHandler来进行分块上传:

import 'dart:convert';
import 'package:en_file_uploader/en_file_uploader.dart';
import 'package:http/http.dart' as http;
import 'package:http_file_uploader/http_file_uploader.dart';

void main() async {
  // 初始化HttpClient
  final client = http.Client();
  
  // 假设我们有一个文件XFile("fake_file"),实际应用中应该替换为真实文件路径
  final file = XFile("fake_file");

  const baseRequestPath = "my-server";

  // 创建一个HttpRestorableChunkedFileHandler实例
  final restorableHandler = HttpRestorableChunkedFileHandler(
    client: client,
    file: file,
    presentMethod: "POST",
    chunkMethod: "PATCH",
    statusMethod: "HEAD",
    presentPath: "$baseRequestPath/upload/presentation",
    chunkPath: (presentation, _) => "$baseRequestPath/upload/${presentation.id}/chunk",
    statusPath: (presentation) => "$baseRequestPath/upload/${presentation.id}/status",
    presentHeaders: {
      "size": file.lengthSync().toString(),
    },
    chunkHeaders: (presentation, chunk) {
      return {
        "from": chunk.start.toString(),
        "end": chunk.end.toString(),
      };
    },
    statusHeaders: null,
    presentParser: (response) => FileUploadPresentationResponse(id: jsonDecode(response.body)),
    statusParser: (response) => FileUploadStatusResponse(nextChunkOffset: jsonDecode(response.body)),
    chunkSize: 1024 * 1024, // 每个分块大小为1MB
    presentBody: null, 
    chunkBody: null,
    statusBody: null,
  );

  // 使用handler创建控制器并开始上传
  final controller = FileUploadController(restorableHandler);
  await controller.upload();

  // 关闭client
  client.close();
}

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

1 回复

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


当然,以下是如何在Flutter应用中使用http_file_uploader插件进行文件上传的示例代码。这个插件允许你通过HTTP POST请求上传文件。

首先,确保你的Flutter项目已经包含了http_file_uploader依赖。在你的pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  http_file_uploader: ^x.y.z  # 请替换为最新版本号

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

接下来,你可以使用以下代码来上传文件:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http_file_uploader/http_file_uploader.dart';

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

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

class FileUploadPage extends StatefulWidget {
  @override
  _FileUploadPageState createState() => _FileUploadPageState();
}

class _FileUploadPageState extends State<FileUploadPage> {
  final FilePickerController _picker = FilePickerController();
  File? _selectedFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('File Upload Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 打开文件选择器
                final result = await _picker.pickFiles(
                  type: FileType.any,
                );

                if (result != null) {
                  // 获取第一个选择的文件
                  final file = File(result.files.single.path!);
                  setState(() {
                    _selectedFile = file;
                  });

                  // 上传文件
                  _uploadFile(file);
                }
              },
              child: Text('选择文件'),
            ),
            if (_selectedFile != null)
              Text('选中文件: ${_selectedFile!.path}'),
          ],
        ),
      ),
    );
  }

  void _uploadFile(File file) async {
    // 配置上传服务器URL
    final url = 'https://example.com/upload'; // 请替换为你的上传服务器URL

    // 创建上传请求
    final uploader = HttpFileUploader(
      url: url,
      files: [
        HttpFile(
          fieldName: 'file', // 服务器接收文件的字段名
          filename: file.path,
          mimeType: lookupMimeType(file.path),
          file: file,
        ),
      ],
      data: {
        'userId': '12345', // 你可以在这里添加其他表单数据
      },
      headers: {
        'Authorization': 'Bearer YOUR_ACCESS_TOKEN', // 如果需要认证,请添加你的token
      },
    );

    // 发送上传请求
    try {
      final response = await uploader.upload();
      print('上传成功: ${response.statusCode}');
      print('响应数据: ${response.body}');
    } catch (e) {
      print('上传失败: $e');
    }
  }

  // 查找文件MIME类型
  String lookupMimeType(String filePath) {
    final extension = filePath.split('.').last;
    switch (extension) {
      case 'jpg':
      case 'jpeg':
        return 'image/jpeg';
      case 'png':
        return 'image/png';
      case 'pdf':
        return 'application/pdf';
      // 添加更多MIME类型...
      default:
        return 'application/octet-stream';
    }
  }

  @override
  void dispose() {
    _picker.dispose();
    super.dispose();
  }
}

代码说明:

  1. 依赖导入:导入http_file_uploaderfile_picker插件(注意:file_picker插件用于文件选择,这里假设你已经添加了这个依赖)。
  2. UI布局:使用ElevatedButton打开文件选择器,选择文件后显示文件路径。
  3. 文件上传:使用HttpFileUploader配置上传请求,包括URL、文件、附加数据和头部信息。
  4. MIME类型查找:一个简单的函数lookupMimeType,用于根据文件扩展名返回MIME类型。

注意事项:

  • 请确保你已经正确配置了上传服务器的URL和认证信息。
  • 根据你的需求,可以扩展MIME类型的查找函数。
  • 错误处理:实际应用中应添加更完善的错误处理逻辑。

这样,你就可以在Flutter应用中实现文件上传功能了。

回到顶部