Flutter 中的文件上传：多文件上传的实现

Flutter 中的文件上传：多文件上传的实现

5 回复

使用dart:async和http库，遍历文件列表，逐个上传。

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


在 Flutter 中实现多文件上传，可以使用 http 或 dio 包，通过 MultipartRequest 将多个文件添加到请求中，然后发送到服务器。

在Flutter中实现多文件上传，可以使用http或dio库。以下是使用dio的简单示例：

  1. 添加dio依赖到pubspec.yaml：

    dependencies:
  dio: ^4.0.0

  2. 使用dio上传多个文件：

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

void uploadFiles(List<File> files) async {
  var dio = Dio();
  var formData = FormData();

  for (var file in files) {
    formData.files.add(MapEntry(
      'files',
      await MultipartFile.fromFile(file.path, filename: file.path.split('/').last),
    ));
  }

  try {
    var response = await dio.post('https://your-upload-url.com/upload', data: formData);
    print(response.data);
  } catch (e) {
    print(e);
  }
}

  3. 在UI中调用uploadFiles，传递选择的文件列表。

使用dio或http包，配合FormData，循环添加多个文件进行上传。

在 Flutter 中实现多文件上传通常涉及以下几个步骤：选择多个文件、将文件转换为可上传的格式、发送 HTTP 请求到服务器。以下是实现多文件上传的基本步骤和示例代码：

  1. 选择多个文件： 使用 file_picker 插件来选择多个文件。首先，在 pubspec.yaml 中添加依赖：

    dependencies:
  flutter:
    sdk: flutter
  file_picker: ^4.0.0

    然后，使用 FilePicker.platform.pickFiles 方法来选择多个文件：

    import 'package:file_picker/file_picker.dart';

Future<List<PlatformFile>> pickFiles() async {
  FilePickerResult? result = await FilePicker.platform.pickFiles(allowMultiple: true);

  if (result != null) {
    return result.files;
  } else {
    return [];
  }
}

  2. 将文件转换为可上传的格式： 使用 http 包发送文件时，通常需要将文件转换为 MultipartFile。MultipartFile.fromPath 方法可以将文件路径转换为 MultipartFile。

    import 'dart:io';
import 'package:http/http.dart' as http;

Future<void> uploadFiles(List<PlatformFile> files) async {
  var uri = Uri.parse('https://your-server.com/upload');
  var request = http.MultipartRequest('POST', uri);

  for (var file in files) {
    request.files.add(await http.MultipartFile.fromPath('files', file.path!));
  }

  var response = await request.send();

  if (response.statusCode == 200) {
    print('Uploaded successfully!');
  } else {
    print('Upload failed with status: ${response.statusCode}');
  }
}

  3. 整合代码： 将文件选择和上传功能整合到一起：

    import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:http/http.dart' as http;

class MultiFileUpload extends StatelessWidget {
  Future<void> uploadFiles() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles(allowMultiple: true);

    if (result != null) {
      var uri = Uri.parse('https://your-server.com/upload');
      var request = http.MultipartRequest('POST', uri);

      for (var file in result.files) {
        request.files.add(await http.MultipartFile.fromPath('files', file.path!));
      }

      var response = await request.send();

      if (response.statusCode == 200) {
        print('Uploaded successfully!');
      } else {
        print('Upload failed with status: ${response.statusCode}');
      }
    }
  }

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

void main() => runApp(MaterialApp(home: MultiFileUpload()));

通过这些步骤，你可以在 Flutter 中实现多文件上传功能。

回到顶部