使用 dart:HTML 库在 Flutter Web 中选择文件时如何获取 Flutter 中的文件名？

Posted 2023-02-23

【中文标题】使用 dart:HTML 库在 Flutter Web 中选择文件时如何获取 Flutter 中的文件名？

【英文标题】：How to get the file name in Flutter when using dart:HTML library to pick file in Flutter Web?

【发布时间】：2021-04-16 23:35:18

【问题描述】：

在我的项目中，我定义了一个函数uploadPdf()。 在 Raised Button 处调用此函数来选择一个文件，它工作正常。它打印文件名。现在我想将该文件名转换为文本小部件。为此，我将 fileName 定义为全局变量，并最初分配了值。在 uploadPdf() 函数中调用此变量，以便在获取新值时更新该值，但不会更改。它仍然显示我最初分配的相同值。 谢谢！

//Flutter Full Code
import 'package:flutter/material.dart';
import 'dart:html';

String fileName = "no item selected";

void uploadPdf() 
  InputElement uploadInput = FileUploadInputElement()..accept = 'pdf/*';
  uploadInput.click();
  uploadInput.onChange.listen((event) 
    final file = uploadInput.files.first;
    fileName = file.name;
    print(fileName);
    final reader = FileReader();
    reader.readAsDataUrl(file);
    reader.onLoadEnd.listen((event) 
      print('done');
    );
  );


class ButtonChange extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Column(
      children: [
        RaisedButton(
          onPressed: () => uploadPdf(),
          child: Text("Upload Button"),
        ),
        Text(fileName)
      ],
    );
  

【参考方案1】：

您需要将ButtonChange 小部件转换为StatefulWidget，并将uploadPdf() 函数移动到状态类中，并在更新文件名后调用setState。

void uploadPdf() 
  InputElement uploadInput = FileUploadInputElement()..accept = 'pdf/*';
  uploadInput.click();
  uploadInput.onChange.listen((event) 
    final file = uploadInput.files.first;
    setState(() 
       fileName = file.name; 
    );
    fileName = file.name;
    print(fileName);
    final reader = FileReader();
    reader.readAsDataUrl(file);
    reader.onLoadEnd.listen((event) 
      print('done');
    );
  );
  

【讨论】：

感谢它的工作，但它们是一个小问题...我需要再次单击按钮并必须取消然后它会更新最后一个值。

@Prateek 我更新了我的答案。我猜onChange 是异步的，所以 setState 将在 fileName 更新之前执行。请在 onChange 事件中移动setState，它会立即更新。

感谢@Calvin，现在它会立即更新文件名。