Flutter文件上传功能插件file_upload的使用

使用

请更改本地主机URL以匹配您的服务器URL。

import 'package:file_upload/file_upload.dart';

// 在此示例中我们使用了localhost URL，但您需要将其更改为您的服务器URL
String _url = 'http://10.0.2.2:5000';
FileUpload fileUpload = FileUpload();

Future<void> sendFiles() async {
  String url = '$_url/request1';
  /*
  uploadTwoFiles()
  参数:
    String url,
    String fileKey1,
    String filePath1,
    String fileType1,
    String fileKey2,
    String filePath2,
    String fileType2
  */
  var response1 = await fileUpload.uploadTwoFiles(
      url, 'video', path1!, 'mp4', 'image', path2!, 'jpg');
  print(response1);
}

Future<void> sendFile() async {
  /*uploadFile()
  参数:
      String url,
      String fileKey,
      String filePath,
      String fileType)
  */
  String url = '$_url/request2';
  // url, fileKey, filePath, fileType
  var response2 = await fileUpload.uploadFile(url, 'audio', path3!, 'wav');
  print(response2);
}

完整示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:file_upload/file_upload.dart';
import 'package:image_picker/image_picker.dart';
import 'package:file_picker/file_picker.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '文件上传示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FileUploadExample(
        title: '文件上传示例',
      ),
    );
  }
}

class FileUploadExample extends StatefulWidget {
  FileUploadExample({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _FileUploadExampleState createState() => _FileUploadExampleState();
}

class _FileUploadExampleState extends State<FileUploadExample> {
  FileUpload fileUpload = FileUpload();
  Map<String, dynamic> response1 = {};
  List response2 = [];
  final ImagePicker _picker = ImagePicker();
  PickedFile? file1;
  PickedFile? file2;
  FileType? _pickingType = FileType.custom;
  String? path1;
  String? path2;
  String? path3;
  // 在此示例中我们使用了localhost URL，但您需要将其更改为您的服务器URL
  String _url = 'http://10.0.2.2:5000';

  Future getVideoFromGallery() async {
    file1 = await _picker.getVideo(source: ImageSource.gallery);
    setState(() {
      path1 = file1?.path;
      print(path1);
    });
  }

  Future getImageFromGallery() async {
    file2 = await _picker.getImage(source: ImageSource.gallery);
    setState(() {
      path2 = file2?.path;
      print(path2);
    });
  }

  void _pickFile3() async {
    FilePicker.platform.pickFiles(
      type: _pickingType!,
      onFileLoading: (FilePickerStatus status) => print(status),
      allowedExtensions: ['mp3', 'wav'],
    ).then((paths) async {
      path3 = paths?.files![0].path!.substring(1);
      print(path3);
    });
  }

  Future<void> sendFiles() async {
    String url = '$_url/request1';
    /*
    uploadTwoFiles()
    参数:
      String url,
      String fileKey1,
      String filePath1,
      String fileType1,
      String fileKey2,
      String filePath2,
      String fileType2
    */
    print(url);
    response1 = await fileUpload.uploadTwoFiles(
        url, 'video', path1!, 'mp4', 'image', path2!, 'jpg');
    print(response1);
  }

  Future<void> sendFile() async {
    String url = '$_url/request2';
    /*uploadFile()
  参数:
      String url,
      String fileKey,
      String filePath,
      String fileType)
  */
    response2 = await fileUpload.uploadFile(url, 'audio', path3!, 'wav');
    print(response2);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
                onPressed: () {
                  getVideoFromGallery();
                },
                child: Text('选择文件1')),
            ElevatedButton(
                onPressed: () {
                  getImageFromGallery();
                },
                child: Text('选择文件2')),
            ElevatedButton(
                onPressed: () {
                  sendFiles();
                },
                child: Text('发送文件')),
            Text('$response1'),
            ElevatedButton(
                onPressed: () {
                  _pickFile3();
                },
                child: Text('选择文件3')),
            ElevatedButton(
                onPressed: () {
                  sendFile();
                },
                child: Text('发送文件')),
            Text('$response2'),
          ],
        ),
      ),
    );
  }
}