Как выбрать файлы и изображения для загрузки с помощью флаттера

Я хотел бы знать, как выбрать изображение с компьютера пользователя в мое веб-приложение флаттера для загрузки.

Вы можете проверить мой ответ здесь в другом посте. Он в основном использует пакет FileUploadInputElement from dart:html.

Abhilash Chandran 04.11.2019 10:36
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
38
1
34 401
6
Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Я попробовал код ниже, и он сработал.

первый import 'dart:html';

// variable to hold image to be displayed 

      Uint8List uploadedImage;

//method to load image and update `uploadedImage`


    _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(() {
                      uploadedImage = reader.result;
                    });
        });

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

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

теперь просто любой виджет, например кнопка и вызовите метод _startFilePicker()

есть ли способ определить, был ли отменен сборщик файлов?

Abdul Rafay 26.09.2020 21:04

@AbdulRafay, насколько я понимаю, в Интернете нет отмененных обратных вызовов.

C. Skjerdal 30.11.2020 23:51

Мне довольно сложно загрузить изображение с помощью флаттера. Это решение также дает ошибку - <error>:<getObject: NoSuchMethodError: геттер 'uri' был вызван с нулевым значением.> - Кто-нибудь знает, почему, пожалуйста?

Wesley Barnes 16.04.2021 19:22

Я протестировал этот пакет и был очень доволен результатом imagePickerWeb, он возвращает 3 разных типа, которые могут быть в виде изображения (виджет для предварительного просмотра), байта, файла (загрузки)

то вы можете использовать это, чтобы получить значения

html.File _cloudFile;
 var _fileBytes;
 Image _imageWidget;
 
 Future<void> getMultipleImageInfos() async {
    var mediaData = await ImagePickerWeb.getImageInfo;
    String mimeType = mime(Path.basename(mediaData.fileName));
    html.File mediaFile =
        new html.File(mediaData.data, mediaData.fileName, {'type': mimeType});

    if (mediaFile != null) {
      setState(() {
        _cloudFile = mediaFile;
        _fileBytes = mediaData.data;
        _imageWidget = Image.memory(mediaData.data);
      });
    }

Загрузка в firebase

don't forget to add this to your index.html

  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-storage.js"></script>

Загрузка в firebase

import 'package:firebase/firebase.dart' as fb;
    uploadToFirebase(File file) async {

    final filePath = 'temp/${DateTime.now()}.png';//path to save Storage
    try {
      fb
          .storage()
          .refFromURL('urlFromStorage')
          .child(filePath)
          .put(file);
    } catch (e) {
      print('error:$e');
    }
  }

См. документацию пакета, если у вас все еще есть проблемы

Это репо заархивировано владельцем

grantespo 26.09.2020 19:59

вы все еще можете разветвить репо здесь github.com/Ахмадре/image_picker_web

Dean Villamia 12.12.2020 13:29
Ответ принят как подходящий

Не рекомендуется использовать пакет dart:html непосредственно во Flutter.

Вместо этого используйте этот пакет: https://pub.dev/packages/file_picker.

Пример использования во Flutter Web:

class FileUploadButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('UPLOAD FILE'),
      onPressed: () async {
        var picked = await FilePicker.platform.pickFiles();

        if (picked != null) {
          print(picked.files.first.name);
        }
      },
    );
  }
}

Обратите внимание, что FilePickerResult.path не поддерживается во Flutter Web.

Я использую эти зависимости, но не получаю путь. Мне нужно загрузить его в firebase. ТОГДА что использовать для флаттера в Интернете, чтобы выбрать путь к файлу для сети

Rahul Kushwaha 12.02.2021 08:41

Это работает во флаттер-сети, но путь не нужен и не реализован, как указано в документации явно. Просто используйте свойство PlatformFile.bytes для доступа к байтам.

jnt 12.02.2021 10:59

почему я всегда получаю null в .bytes?

Yogi Arif Widodo 21.11.2021 12:49

Составному запросу требуется Stream<List<int>>. Как получить это из .bytes?

AzureIP 23.11.2021 10:33

ByteStream.fromBytes(bytes!.toList())

AzureIP 25.11.2021 15:29

он показывает эту ошибку для меня: Неподдерживаемая операция: Platform._operatingSystem

Benyamin 09.02.2022 08:03
import 'package:http/http.dart' as http;
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';

class FileUploadWithHttp extends StatefulWidget {
  @override
  _FileUploadWithHttpState createState() => _FileUploadWithHttpState();
}

class _FileUploadWithHttpState extends State<FileUploadWithHttp> {
  PlatformFile objFile = null;

  void chooseFileUsingFilePicker() async {
    //-----pick file by file picker,

    var result = await FilePicker.platform.pickFiles(
      withReadStream:
          true, // this will return PlatformFile object with read stream
    );
    if (result != null) {
      setState(() {
        objFile = result.files.single;
      });
    }
  }

  void uploadSelectedFile() async {
    //---Create http package multipart request object
    final request = http.MultipartRequest(
      "POST",
      Uri.parse("Your API URL"),
    );
    //-----add other fields if needed
    request.fields["id"] = "abc";

    //-----add selected file with request
    request.files.add(new http.MultipartFile(
        "Your parameter name on server side", objFile.readStream, objFile.size,
        filename: objFile.name));

    //-------Send request
    var resp = await request.send();

    //------Read response
    String result = await resp.stream.bytesToString();

    //-------Your response
    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          //------Button to choose file using file picker plugin
          RaisedButton(
              child: Text("Choose File"),
              onPressed: () => chooseFileUsingFilePicker()),
          //------Show file name when file is selected
          if (objFile != null) Text("File name : ${objFile.name}"),
          //------Show file size when file is selected
          if (objFile != null) Text("File size : ${objFile.size} bytes"),
          //------Show upload utton when file is selected
          RaisedButton(
              child: Text("Upload"), onPressed: () => uploadSelectedFile()),
        ],
      ),
    );
  }
}

Пожалуйста, добавьте более подробную информацию о вашем ответе

sta 17.01.2021 10:42

Можем ли мы использовать его для флаттера?

Rahul Kushwaha 12.02.2021 08:42

@RahulKushwaha Да! Он хорошо работает в сети флаттера.

Lad Khushbu 15.02.2021 07:20

@LadKhushbu Это дает мне нулевой путь aas при выборе любого файла .docs. Я использую пакет pub.dev/packages/file_picker.

Rahul Kushwaha 15.02.2021 07:33

@RahulKushwaha Да, он вернет нулевой путь в Интернете, поэтому используйте ReadStream для загрузки файла.

Lad Khushbu 21.02.2021 10:40

@LadKhushbu, не могли бы вы поделиться со мной подробностями о том, как использовать поток чтения и ?

Rahul Kushwaha 23.02.2021 11:59

mimetype запроса application/octet-stream не изображение .

Yogi Arif Widodo 21.11.2021 16:27

Как работать с большими файлами? Это работает только для примерно до 537 МБ.

AzureIP 25.11.2021 15:31

@LadKhushbu, можете ли вы обновить этот ответ с нулевой безопасностью? в строке потока чтения показывает эту ошибку: Stream<List<int>>?' не может быть присвоен типу параметра 'Stream<List<int>>

Benyamin 09.02.2022 07:01

Принятый ответ действительно устарел. Как и было предложено джнт, https://pub.dev/packages/file_picker — это удобный пакет, когда дело доходит до реализации загрузки изображений с помощью Flutter Web.

Проблема, с которой я столкнулся, заключается в том, чтобы получить представление изображения base64, поскольку я использовал его для хранения изображений в пожарный магазин. Как мы знаем, dart:io не поддерживается на Flutter Web и выдает ошибку Unsupported operation: _Namespace. Следовательно, использование File и чтение байтов файла было невозможным. К счастью, пакет предоставляет API для преобразования загруженного изображения в Uint8List. Вот моя реализация:

import 'package:file_picker/file_picker.dart';

...

FilePickerResult? pickedFile;

...

void chooseImage() async {
    pickedFile = await FilePicker.platform.pickFiles();
    if (pickedFile != null) {
      try {
        setState(() {
          logoBase64 = pickedFile!.files.first.bytes;
        });
      } catch (err) {
        print(err);
      }
    } else {
      print('No Image Selected');
    }
}

Если вам нужно сразу отобразить локальное изображение, используйте Image.memory.

Image.memory(logoBase64!);

Это легкая часть, вы пропустили, как отправить его через http и, самое главное, как обработать его на сервере.

Santiago 25.01.2022 19:17

Согласен с Сантьяго. Это легко, это преобразование байтов обратно в файл для загрузки в AWS, для которого трудно найти ответ.

Jeff Frazier 04.03.2022 21:30

У меня тоже есть эта проблема;

я использую https://pub.dev/packages/file_picker, но в веб-пути флаттера не поддерживается;

вы должны использовать байты;

я сохраняю байты файла в var _fileBytes и использую в запросе;

var request = http.MultipartRequest('POST', Uri.parse('https://.....com'));
request.headers.addAll(headers);
request.files.add(
   http.MultipartFile.fromBytes(
     'image', 
      await ConvertFileToCast(_fileBytes),
      filename: fileName,
      contentType: MediaType('*', '*')
   )
);
request.fields.addAll(fields);
var response = await request.send();

функция ConvertFileToCast:

ConvertFileToCast(data){
  List<int> list = data.cast();
  return list;
}

это работа для меня :)

Другие вопросы по теме