搞定图片上传，Flutter 一键搞定多选、上传进度条、失败重试、失败删除

2023-07-10 02:43:22

解锁 NUploadBox/NUploadButton：提升图片上传体验的新利器

前言

在现代化的应用程序开发中，图片上传功能至关重要。为了简化和增强这一过程，NUploadBox 和 NUploadButton 组件应运而生，它们将图片上传提升到了一个全新的水平。本文将深入探讨这些组件的强大特性、使用方法和应用优势，帮助您解锁图片上传的无限潜力。

NUploadBox/NUploadButton：强势出击

NUploadBox 和 NUploadButton 是专为 Flutter 开发人员设计的出色组件，可将图片上传功能无缝集成到您的应用程序中。它们的核心功能包括：

多选图片

告别逐个选择图片的繁琐，NUploadBox 和 NUploadButton 允许用户一次选择多张图片。这大大提升了效率，尤其是在需要上传大量图片的情况下。

上传进度条

图片上传过程中，用户可以实时查看每个文件的上传进度。这消除了不必要的猜测，让他们随时掌握上传状态。

失败重连

万一上传失败，这些组件将自动重连，直到成功为止。此功能确保了文件即使在网络不稳定的情况下也能可靠地上传。

失败删除

如果上传失败，失败的图片将被自动删除。这释放了宝贵的存储空间，防止了不必要的冗余。

上传成功回调

每张图片上传成功后，组件都会触发一个 URL 回调。此功能可用于进一步处理，例如将图片存储在数据库或将其显示在界面上。

使用方法：简捷易行

1. 依赖引入

dependencies:
  n_upload_box: ^0.0.1

2. 代码实现

import 'package:n_upload_box/n_upload_box.dart';

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('图片上传'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            NUploadBox(
              onUpload: (files) async {
                // 上传文件
                for (var file in files) {
                  // 上传文件代码
                }
              },
              onSelect: (files) {
                // 选择文件后回调
              },
            ),
          ],
        ),
      ),
    );
  }
}