Flutter Web - 如何选择 PDF 文件并 POST 到 API？

Posted 2023-02-23

【中文标题】Flutter Web - 如何选择 PDF 文件并 POST 到 API？

【英文标题】：Flutter Web - How to pick a PDF file and POST to an API?

【发布时间】：2020-05-15 04:42:12

【问题描述】：

我正在构建一个 Flutter Web 应用程序，其中一部分用户可以从他们的计算机中选择一个或多个 PDF。然后，此 PDF 将被发送到 API。有没有办法在 Flutter Web 上做到这一点？

【参考方案1】：

你可以使用file_picker 1.12.0：

dependencies:
  file_picker: ^1.12.0

此软件包允许您使用本机文件浏览器来选择单个或多个绝对文件路径，并支持扩展过滤。

【参考方案2】：

参考this solution，我准备了帮助类来简化flutter web上的文档选择：

import 'dart:async';
import 'package:universal_html/prefer_universal/html.dart';

class DocumentPicker

  static Future<List<dynamic>> open( List<String> types, bool multiple = false) async 

    final completer = Completer<List<String>>();
    InputElement uploadInput = FileUploadInputElement();

    if(types != null  && types.length > 0)
      String theTypes = types.join(',');
      uploadInput.accept = theTypes;
    

    uploadInput.multiple = multiple;
    uploadInput.click();
    uploadInput.addEventListener('change', (e) async 
      final files = uploadInput.files;
      Iterable<Future<String>> resultsFutures = files.map((file) 
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      );
      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    );

    document.body.append(uploadInput);
    return completer.future;
  

示例：

if(kIsWeb) 
      DocumentPicker.open(types: ['application/pdf']).then((list) 
        processList(list);
      );
      return;
    

这将返回所选文件的 base64 编码字符串列表。