Wprowadzanie pliku i Dart

Question

Próbuję Dart, ale nie mogę wymyślić, jak wysłać obraz z użytkownika na serwer. Mam swój tag wejściowy i mogę to osiągnąć w kodzie DART, ale nie mogę go odczytać. Próbuję coś takiego:

InputElement ie = document.query('#myinputelement'); 

ie.on.change.add((event){<br/> 
    InputElement iee = document.query('#myinputelement');<br/> 
    FileList mfl = iee.files;<br/> 
    File myFile = mlf.item(0);<br/> 

    FileReader fr = new FileReader(); 
    fr.readAsBinaryString(myFile); 

    String result = fr.result; //this is always empty 
}); 

Z html zawierający:

<input type="file" id="myinputelement"> 

Mam nadzieję, że nie możesz mi pomóc im trochę zakleszczony. Być może po prostu brakuje mi tego, jak zrobić onload dla filereadera, lub może robię to zupełnie źle.

Answer 1

Interfejs API FileReader jest asynchroniczny, więc należy użyć procedur obsługi zdarzeń.

var input = window.document.querySelector('#upload'); 
Element log = query("#log"); 

input.addEventListener("change", (e) { 
    FileList files = input.files; 
    Expect.isTrue(files.length > 0); 
    File file = files.item(0); 

    FileReader reader = new FileReader(); 
    reader.onLoad = (fileEvent) { 
    print("file read"); 
    log.innerHTML = "file content is ${reader.result}"; 
    }; 
    reader.onerror = (evt) => print("error ${reader.error.code}"); 
    reader.readAsText(file); 
}); 

trzeba także umożliwiają przesyłanie plików z do przeglądarki, które mogą być wykonane w Chrome uruchamiając go z flagą --allow-file-access-from-pliki

Answer 2

Nie konieczne (więcej) do użycia dart: dom FileReader zamiast z dart: html.

Twój kod powinien działać, jeśli dodać detektor zdarzeń do czytnika plików, na przykład:

FileReader fr = new FileReader(); 
fr.on.load.add((fe) => doSomethingToString(fe.target.result)); 
fr.readAsBinaryString(myFile); 

Answer 3

ten sposób odczytać plik używając dart:html.

document.querySelector('#myinputelement`).onChange.listen((changeEvent) { 
    List fileInput = document.querySelector('#myinputelement').files; 

    if (fileInput.length > 1) { 
     // More than one file got selected somehow, could be a browser bug. 
     // Unless the "multiple" attribute is set on the input element, of course 
    } 
    else if (fileInput.isEmpty) { 
     // This could happen if the browser allows emptying an upload field 
    } 

    FileReader reader = new FileReader(); 
    reader.onLoad.listen((fileEvent) { 
      String fileContent = reader.result; 
      // Code doing stuff with fileContent goes here! 
    }); 

    reader.onError.listen((itWentWrongEvent) { 
      // Handle the error 
    }); 

    reader.readAsText(fileInput[0]); 
}); 

Answer 4

Moja próba

void fileSelected(Event event) async { 
    final files = (event.target as FileUploadInputElement).files; 
    if (files.isNotEmpty) { 
     final reader = new FileReader(); 

     // ignore: unawaited_futures 
     reader.onError.first.then((evt) => print('error ${reader.error.code}')); 
     final resultReceived = reader.onLoad.first; 
     reader.readAsArrayBuffer(files.first); 

     await resultReceived; 
     imageReference.fileSelected(reader.result as List<int>); 
    } 
    }