web-dev-qa-db-ja.com

Flutter-画像をFirebase Storageにアップロード

Firebase Storageから画像を取得するか、カメラで写真を撮るか、ライブラリから画像を選択します。これらのいずれかが完了すると、Imageを格納するクラスができ、必要なときに使用できるようになります。

次に、この画像をFirebase Storageにアップロードする必要があります（変更または新規、どちらでも構いません）。 Firebaseでは、次のいずれかを使用できます：putDataまたはputFile、それぞれにUint8ListまたはFileが必要です。

Imageを取得して、アップロード用にFileまたはUint8Listを取得するにはどうすればよいですか？

-

これを修正する代わりに、Firebase Storageから取得した画像のFileを取得するにはどうすればよいですか？

どちらの方法でも、最初または最後にFileを取得しても、画像をアップロードするための正しいデータ型が提供されます。

imagefilefirebaseflutterfirebase-storage
7
Josh Kahane

画像ピッカーで画像を選択すると、ファイルが返されます。awaitを使用して、ユーザーがファイルを選択するまで待機してから、ファイルとして保存できます。以下は、イメージピッカーからファイルを取得してFirebaseにアップロードする方法のサンプルコードです。

    FirebaseStorage _storage = FirebaseStorage.instance;

    Future<Uri> uploadPic() async {

    //Get the file from the image picker and store it 
    File image = await ImagePicker.pickImage(source: ImageSource.gallery);  

    //Create a reference to the location you want to upload to in firebase  
    StorageReference reference = _storage.ref().child("images/");

    //Upload the file to firebase 
    StorageUploadTask uploadTask = reference.putFile(file);

    // Waits till the file is uploaded then stores the download url 
    Uri location = (await uploadTask.future).downloadUrl;

    //returns the download url 
    return location;
   }
9
Nash

ギャラリーやカメラから画像を選んだとき

以下の関数を使用して、拡張子付きのファイル名を取得します

basename(image.path)

次に、アップロードするパスとファイル名を付けてファイルをfirebase Storage Referenceに渡します。その場合、ファイルの拡張子を考慮する必要はありません。

使用されるライブラリ

import 'package:image_picker/image_picker.Dart';
import 'package:path/path.Dart';
import 'package:firebase_storage/firebase_storage.Dart';

コード：

upload() async {
   //pick image   use ImageSource.camera for accessing camera. 
   File image = await ImagePicker.pickImage(source: ImageSource.gallery);

   //basename() function will give you the filename
   String fileName = basename(image.path);

   //passing your path with the filename to Firebase Storage Reference
   StorageReference reference =
        FirebaseHelper.firebaseStorage().child("your_path/$fileName");

   //upload the file to Firebase Storage
   StorageUploadTask uploadTask = reference.putFile(image);

   //Snapshot of the uploading task
   StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
}
1
Vicky Salunkhe

firebase_storage：^ 3.0.6、image_picker：^ 0.6.1使用する必要があるこの2つのライブラリ

その後、画像を取得します

  Future getImage() async {
    var tempImage = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      sampleImage = tempImage;
     });
  }

そして今、画像をアップロードします

Widget enableUpload() {
return Container(
  child: Column(
    children: <Widget>[
      Image.file(sampleImage, height: 300.0, width: 300.0),
      RaisedButton(
        elevation: 7.0,
        child: Text('Upload'),
        textColor: Colors.white,
        color: Colors.blue,
        onPressed: () {
          final StorageReference firebaseStorageRef =
              FirebaseStorage.instance.ref().child('myimage.jpg');
          final StorageUploadTask task =
              firebaseStorageRef.putFile(sampleImage);

        },
      )
    ],
  ),
);
}

このenableUpload（）ウィジェットは、必要な場所で使用できます。

0
The-A-Team

Imageタイプが何であるかわかりません。 Flutterフレームワークには is Image class があります。これはウィジェットであり、カメラから取得するものではありません。

Flutterでは通常、画像はFileにすぎません。つまり、putFileは問題なく機能するはずです。

FirebaseStorage.instance.ref().child(path).putFile(image)

私が投稿したものが機能しない場合は、実際のタイプに関する情報を追加してください。

0
creativecreatorormaybenot