1
votes

Télécharger l'image dans Flutter Web

Flutter Web est toujours en préversion technique, mais je souhaite sélectionner une image du disque et la télécharger sur le serveur. Est-il possible d'ajouter du HTML, du JS à mon projet Web Flutter et d'interagir avec lui?

flutter dart

0 commentaires

3 Réponses :

0
votes

Cela fera ce que vous voulez pour le Web. Appelez-le simplement à partir de n'importe quel bouton et il ouvrira la boîte de dialogue système pour choisir le fichier.

Container(
      width: formProvider.logoEmpresa == null
          ? 70.0
          : 90.0,
      child: formProvider.logoEmpresa == null
          ? Icon(
              Icons.attach_file,
              size: 70.0,
              color: kColorPrincipal,
            )
          : Image.memory(formProvider.logoEmpresa,
              fit: BoxFit.fitWidth),
    ),

Le fournisseur:

class ProviderForm extends ChangeNotifier {
    Uint8List logoEmpresa;
    void setLogoEmpresa(Uint8List newFile) {
       logoEmpresa = newFile;
       notifyListeners();
    }
}

Ensuite dans votre afficher, vous pouvez le rendre comme ceci, au cas où aucune image ne serait affichée, une icône de pièce jointe:

import 'dart:typed_data';
import 'package:universal_html/prefer_sdk/html.dart';    
import '../../../providers/form_provider.dart';

Uint8List uploadedImage;

startFilePickerWeb(ProviderForm formProvider) 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) {
      //Here I send the imatge to my Provider 
        formProvider.setLogoEmpresa(reader.result);
      });

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

      reader.readAsArrayBuffer(file);
    }
  });
}

Si vous avez des questions, veuillez demander et je ferai de mon mieux pour aider .

2 commentaires

comment l'utiliser pour envoyer un fichier?

Cela dépend de ce que vous comprenez avec l'envoi. Voulez-vous partager avec une action de partage spécifique à la plate-forme? il y a des packages pour ça, voulez-vous télécharger vers une API? Ensuite, utilisez l'action de publication là-bas ... soyez plus spécifique si je peux vous aider.

1
votes

Vous avez besoin de addEventListener et vous devez également l'ajouter pour le woking sur mobile safari. J'ai répondu ici aussi .

Future<void> _setImage() async {   
    final completer = Completer<List<String>>();
    final InputElement input = document.createElement('input');
    input
      ..type = 'file'
      ..multiple = true
      ..accept = 'image/*';
    input.click();
    // onChange doesn't work on mobile safari
    input.addEventListener('change', (e) async {
      final List<File> files = input.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);
    });
    // need to append on mobile safari
    document.body.append(input);
    // input.click(); can be here
    final List<String> images = await completer.future;
    setState(() {
      _uploadedImages = images;
    });
    input.remove();
}

Cela fonctionne également:

Future<void> _setImage() async {
    final completer = Completer<List<String>>();
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.multiple = true;
    uploadInput.accept = 'image/*';
    uploadInput.click();
    // onChange doesn't work on mobile safari
    uploadInput.addEventListener('change', (e) async {
        // read file content as dataURL
        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);
    });
    // need to append on mobile safari
    document.body.append(uploadInput);
    final List<String> images = await completer.future;
    setState(() {
        _uploadedImages = images;
    });
    uploadInput.remove();
}

0 commentaires

0
votes

Vous pouvez utiliser image_picker_web :

dependencies:
  image_picker_web: ^1.0.9

sélectionne des images (sous forme de widget, fichier ou Uint8List ) et vidéos (sous forme de fichier ou Uint8List)

0 commentaires