Flutter大文件上传插件large_file_uploader的使用

Flutter大文件上传插件large_file_uploader的使用

1 - 依赖它

在你的项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  large_file_uploader: ^0.0.7

2 - 安装它

从命令行安装包：

flutter pub get

3 - 导入它

在你的项目中导入该库：

import 'package:large_file_uploader/large_file_uploader.dart';

4 - 复制它

将upload_worker.js复制到项目的public文件夹中。

如何使用？

简单用法

LargeFileUploader().selectFileAndUpload(
    uploadUrl: 'https://baseurl.com/upload-path',
    data: {
      'title': 'My image', // 额外要发送的字段
    },
    headers: {
      'Authorization': 'Bearer <accessToken>', 
    },
    onSendProgress: (progress) => debugPrint('onSendProgress:$progress'),
    onComplete: () => debugPrint('onComplete'),
    onFailure: () => debugPrint('onFailure'),
);

高级用法

import 'dart:html' as html;
import 'package:large_file_uploader/large_file_uploader.dart';

...

final _largeFileUploader = LargeFileUploader();
html.File? file; 
html.File? thumbnail;

_largeFileUploader.pick(
      type: FileTypes.video, 
      callback: (file) {
        pickedThumbnail = file;
      },
);

_largeFileUploader.pick(
      customType: 'image/jpeg', 
      callback: (file) {
        thumbnail = file;
      },
);

if(file != null){
  _largeFileUploader.upload(
      uploadUrl: url,
      headers: {"Authorization": "Bearer <accessToken>"},
      data: {"title": "My Image", "thumbnail": thumbnail, "file": file},
      onSendProgress: (progress) => debugPrint(progress.toString()),
      onComplete: (response) => debugPrint(response.toString()),
  );
}

示例代码

以下是一个完整的示例代码，展示了如何使用large_file_uploader插件进行大文件上传：

import 'dart:html' as html;

import 'package:flutter/material.dart';
import 'package:large_file_uploader/large_file_uploader.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const UploadExample(),
    );
  }
}

class UploadExample extends StatefulWidget {
  const UploadExample({Key? key}) : super(key: key);

  [@override](/user/override)
  State<UploadExample> createState() => _UploadExampleState();
}

class _UploadExampleState extends State<UploadExample> {
  late final LargeFileUploader _largeFileUploader;

  html.File? pickedFile;
  html.File? pickedThumbnail;

  bool isFileSelected = false;
  bool isThumbnailSelected = false;

  final accessToken = '';
  final url = '';

  [@override](/user/override)
  void initState() {
    _largeFileUploader = LargeFileUploader();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: double.maxFinite,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  _largeFileUploader.pick(
                      type: FileTypes.file,
                      callback: (file) {
                        setState(() {
                          pickedFile = file;
                          isFileSelected = false;
                        });
                      });
                },
                child: const Text("选择并上传文件")),
            const SizedBox(
              height: 8,
            ),
            if (isFileSelected)
              const Text(
                "你需要先选择一个文件",
                style: TextStyle(color: Colors.red),
              ),
            const SizedBox(
              height: 8,
            ),
            ElevatedButton(
                onPressed: () {
                  _largeFileUploader.pick(
                      type: FileTypes.image,
                      callback: (file) {
                        setState(() {
                          pickedThumbnail = file;
                          isThumbnailSelected = false;
                        });
                      });
                },
                child: const Text("选择缩略图")),
            const SizedBox(
              height: 8,
            ),
            if (isThumbnailSelected)
              const Text(
                "你需要先选择一个缩略图",
                style: TextStyle(color: Colors.red),
              ),
            const SizedBox(
              height: 8,
            ),
            ElevatedButton(
                onPressed: () {
                  if (pickedFile != null && pickedThumbnail != null) {
                    _largeFileUploader.upload(
                      uploadUrl: url,
                      headers: {"Authorization": "Bearer $accessToken"},
                      data: {"title": "Sample Title", "thumbnail": pickedThumbnail, "file": pickedFile},
                      onSendProgress: (progress) => debugPrint(progress.toString()),
                      onComplete: (response) => debugPrint(response.toString()),
                    );

                    setState(() {
                      isFileSelected = false;
                      isThumbnailSelected = false;
                    });
                  } else {
                    setState(() {
                      isFileSelected = true;
                      isThumbnailSelected = true;
                    });
                  }
                },
                child: const Text("上传所选文件")),
          ],
        ),
      ),
    );
  }
}