Flutter web - загрузка файла изображения в хранилище Firebase

В сети Flutter я беру файл изображения с 9X_upload-file компьютера и получаю объект изображения 9X_firebase-cloud-functions File. Затем я хочу загрузить его в Firebase 9X_google-cloud-functions Storage. Для версий приложения для Android 9X_image-uploading и iOS я использовал облачную функцию Firebase 9X_firebase-functions и составной HTTP-запрос. Это сработало, но 9X_google-cloud-functions для веб-версии приложения - нет. Итак,

Как 9X_file-upload я могу загрузить файл изображения html в 9X_flutter-web Firebase Storage напрямую или через облачную 9X_flutter-web функцию?

14
0
5
Общее количество ответов: 5

Ответ #1

Ответ на вопрос: Flutter web - загрузка файла изображения в хранилище Firebase

Наконец-то мне удалось найти решение этой 9X_file-upload проблемы. Для этого мне нужно было установить 9X_firebase-functions две зависимости: firebase и universal_html. Но найти решение было 9X_flutter-web непросто, его реализация была на самом деле 9X_flutter-web простой. Вот код функции, которую я использовал 9X_file-upload для загрузки HTML-файла изображения в Firebase 9X_image-uploading Storage, в папку «images»:

import 'dart:async';
import 'package:universal_html/prefer_universal/html.dart' as html;
import 'package:firebase/firebase.dart' as fb;

Future uploadImageFile(html.File image,
      {String imageName}) async {
    fb.StorageReference storageRef = fb.storage().ref('images/$imageName');
    fb.UploadTaskSnapshot uploadTaskSnapshot = await storageRef.put(image).future;
    
    Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
    return imageUri;
}

Надеюсь, это поможет 9X_firebase-storage кому-то с той же потребностью, что и я.

22
2

  • Исходя из этого ответа, у меня сработало использование [image_picker_for_web] (https://pub.dev/packages/image_picker_for_web) для п ...

Ответ #2

Ответ на вопрос: Flutter web - загрузка файла изображения в хранилище Firebase

После того, как я объединил столько сообщений, я 9X_firebase-storage сделал это, и это работает!

Нет, вам просто 9X_firebase-functions не нужен Тип Universal_HTML или другой image_picker_web. Просто 9X_image-uploading используйте Image Picker (https://pub.dev/packages/image_picker). И используйте 9X_firebase-functions приведенный ниже код, который я использовал 9X_flutter-web для загрузки изображения в хранилище Firebase, и 9X_google-cloud-functions он работает на всех IOS, Android, Web, я 9X_firebase-cloud-functions надеюсь, вы уже добавили разрешение для 9X_firebase-cloud-functions ios и android. Начнем!

Import

import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as Path;

Call this method when you want to open a file picker in any of the above platforms!

chooseImage() async {
PickedFile? pickedFile = await ImagePicker().getImage(
      source: ImageSource.gallery,
    );
}

now you've file in pickedFile use kIsWeb to find out if it's web or not!

uploadImageToStorage(PickedFile? pickedFile) async {
if(kIsWeb){
Reference _reference = _firebaseStorage
        .ref()
        .child('images/${Path.basename(pickedFile!.path)}');
    await _reference
        .putData(
      await pickedFile!.readAsBytes(),
      SettableMetadata(contentType: 'image/jpeg'),
    )
        .whenComplete(() async {
      await _reference.getDownloadURL().then((value) {
        uploadedPhotoUrl = value;
      });
    });
 }else{
//write a code for android or ios
}

}

13
0

Ответ #3

Ответ на вопрос: Flutter web - загрузка файла изображения в хранилище Firebase

Вот полный фрагмент, который мне подходит 9X_file-upload для загрузки изображения: html.File не работает для 9X_file-upload меня, файл загружен, но вы увидите Error loading preview в хранилище 9X_image-upload firebase, поэтому просто передача байтов 9X_google-cloud-functions работает для меня.

Чтобы показать изображение, вы 9X_file-upload можете использовать mediaInfo.bytes с виджетом, который 9X_image-upload поддерживает байты, например, FadeInImage, вы можете 9X_google-cloud-functions использовать MemoryImage(mediaInfo.bytes) и Image.memory(mediaInfo.bytes)

используемые пакеты:

  1. firebase
  2. image_picker_web
  3. path
  4. mime_type
    Future imagePicker() async {    
        MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
        return mediaInfo;
     }
     
     Future uploadFile(
          MediaInfo mediaInfo, String ref, String fileName) async {
        try {
          String mimeType = mime(Path.basename(mediaInfo.fileName));

          // html.File mediaFile =
          //     new html.File(mediaInfo.data, mediaInfo.fileName, {'type': mimeType}); 
          final String extension = extensionFromMime(mimeType);

          var metadata = fb.UploadMetadata(
            contentType: mimeType,
          );

          fb.StorageReference storageReference =
              fb.storage().ref(ref).child(fileName + ".$extension");

          fb.UploadTaskSnapshot uploadTaskSnapshot =
              await storageReference.put(mediaInfo.data, metadata).future;

          Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
          print("download url $imageUri");
          return imageUri;
        } catch (e) {
          print("File Upload Error $e");
          return null;
        }
      }

5
0

Ответ #4

Ответ на вопрос: Flutter web - загрузка файла изображения в хранилище Firebase

Ответ на 2022 год

TLDR: конвертируйте файлы в формат XFiles 9X_firebase-functions с помощью пакета cross_file перед загрузкой.

Выберите изображение

Используйте 9X_flutter-web пакет image_picker для выбора изображения. Это работает 9X_firebase-storage на Android, iOS и в Интернете.

Future selectPicture(ImageSource source) async {
  XFile? image = await imagePicker.pickImage(
    source: source,
    maxHeight: 1000,
    maxWidth: 1000,
  );

  return image?.path;
}

Преобразовать XFile в Uint8List

String path = selectPicture(ImageSource.gallery);
Uint8List imageData = await XFile(path).readAsBytes()

Загрузить список Uint8List в облачное хранилище

UploadTask uploadTask = storageReference.putData(file);
5
0

Ответ #5

Ответ на вопрос: Flutter web - загрузка файла изображения в хранилище Firebase

Чтобы получить доступ к облачному хранилищу 9X_image-upload в вашем приложении Flutter for Web, вы можете 9X_firebase-storage использовать firebase-dart plugin. Вы можете найти пример accessing storage through firebase-dart в 9X_image-uploading репо.

3
1

  • Теперь кажется, что он здесь: http ...