Flutter - 上传csv文件

Question

我想在 Flutter 中上传 csv 文件。我正在使用FileUploadInputElement进行文件浏览。 我提出的问题是如何将数据转换为 csv 格式。

这是我目前使用的代码：

class _GenesTableTabState extends State<GenesTableTab> {
  Uint8List uploadedCsv;
  String option1Text;

  _startFilePicker() async {
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      // read file content as dataURL
      final files = uploadInput.files;
      if (files.length == 1) {
        final file = files[0];
        FileReader reader = FileReader();

        reader.onLoadEnd.listen((e) {
          setState(() {
            uploadedCsv = Base64Decoder()
                .convert(reader.result.toString().split(",").last);
          });
        });

        reader.onError.listen((fileEvent) {
          setState(() {
            option1Text = "Some Error occured while reading the file";
          });
        });

        reader.readAsDataUrl(file);
      }
    });
  }

我不知道解码后如何处理uploadedCsv字段。

Answer 1

您可以在下面复制粘贴运行完整代码
您可以检查uploadedCsv并进行转换

uploadedCsv == null
            ? Container()
            : Text(String.fromCharCodes(uploadedCsv)),
uploadedCsv == null
            ? Container()
            : Text(utf8.decode(uploadedCsv)),

工作演示

完整代码

import 'dart:convert';
import 'dart:html';
import 'dart:typed_data';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: GenesTableTab(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _GenesTableTabState createState() => _GenesTableTabState();
}

class _GenesTableTabState extends State<GenesTableTab> {
  Uint8List uploadedCsv;
  String option1Text;

  _startFilePicker() async {
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      // read file content as dataURL
      final files = uploadInput.files;
      if (files.length == 1) {
        final file = files[0];
        FileReader reader = FileReader();

        reader.onLoadEnd.listen((e) {
          setState(() {
            uploadedCsv = Base64Decoder()
                .convert(reader.result.toString().split(",").last);
            print(utf8.decode(uploadedCsv));
          });
        });

        reader.onError.listen((fileEvent) {
          setState(() {
            option1Text = "Some Error occured while reading the file";
          });
        });

        reader.readAsDataUrl(file);
      }
    });
  }

  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            uploadedCsv == null
                ? Container()
                : Text(String.fromCharCodes(uploadedCsv)),
            uploadedCsv == null
                ? Container()
                : Text(utf8.decode(uploadedCsv)),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _startFilePicker,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Answer 2

这是我的处理方式

Uint8List uploadedCsv = new Uint8List(0);
String option1Text = "";

 if (kIsWeb)
{
  print('registering as web file picker');
    startWebFilePicker();
}

//....


 startWebFilePicker() async {
    html.FileUploadInputElement uploadInput = html.FileUploadInputElement();
    uploadInput.click();

          uploadInput.onChange.listen((e) {
        // read file content as dataURL
        final files = uploadInput.files;
        if (files!.length == 1) {
          final file = files[0];
          html.FileReader reader = html.FileReader();

          reader.onLoadEnd.listen((e) {
            setState(() async {
              uploadedCsv = Base64Decoder()
                  .convert(reader.result.toString().split(",").last);

              final fields = CsvToListConverter().convert(utf8.decode(uploadedCsv));
                print(fields);
                setState(() {
                  itemData=fields;
                });

              print('uploadedCSV is now ' + utf8.decode(uploadedCsv)); // utf8.decode returns the UInt8List to readable csv
            });
          });

          reader.onError.listen((fileEvent) {
            setState(() {
              option1Text = "Some Error occured while reading the file";
            });
          });

          reader.readAsDataUrl(file);

        }
      });

  }