web-dev-qa-db-ja.com

Flutter web-画像ファイルをFirebase Storageにアップロード

Flutter Webで、コンピューターから画像ファイルを選択し、File画像オブジェクトを取得します。次に、それをFirebase Storageにアップロードします。 AndroidおよびiOSバージョンのアプリの場合、Firebase Cloud Functionとhttpマルチパートリクエストを使用していました。機能しましたが、アプリのWebバージョンの場合は機能しません。したがって、

直接またはCloud Functionを介して、html画像ファイルをFirebase Storageにアップロードするにはどうすればよいですか?

7
JDE10

画像をアップロードするために私のために働く完全な切り取りはここにあります:_html.File_は私のために機能しません、ファイルはアップロードされますが、Firebaseストレージに_Error loading preview_が表示されるので、バイトを直接渡すだけで機能します私。

画像を表示するには、バイトをサポートするウィジェットで_mediaInfo.bytes_を使用できます。例:FadeInImageMemoryImage(mediaInfo.bytes)Image.memory(mediaInfo.bytes)を使用できます

使用するパッケージ:

  1. firebase
  2. image_picker_web
  3. パス
  4. mime_type
_    Future<MediaInfo> imagePicker() async {    
        MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
        return mediaInfo;
     }
     
     Future<Uri> 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;
        }
      }

_
1
xkxeeshankhan