Flutter - 将图像上传到 Firebase 存储

Question

我从 Firebase 存储中获取图像，用相机拍照，或者从库中挑选一张。当其中一个完成后，我有一个存储Image 的类，以便我可以在需要时使用它。

现在我需要将此图片上传到 Firebase 存储（修改或新的，没关系）。 Firebase 允许我使用以下选项之一：putData 或 putFile，每个都需要一个 Uint8List 或 File。

如何获取我的Image 并从中获取File 或Uint8List 进行上传？

--

另外，为了解决这个问题，当我从 Firebase 存储中检索图像时，如何获得图像的 File？

无论是哪种方式，都可以提供正确的数据类型来上传图片，无论是在开头还是结尾都获得File。

Answer 1

当您使用图像选择器选择图像时，它会返回一个文件，您可以使用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;
   }

Answer 2

要先选择图片（画廊、相机等），您可以使用图片选择器package

然后像这样获取图像作为文件

//Get the file from the image picker and store it
final pickedFile = await picker.getImage(source: ImageSource.camera);

  File image;
  if (pickedFile != null) {
    image = File(pickedFile.path);
  } else {
    print('No image selected.');
    return;
  }

然后检测你要保存这个文件图片的参考

FirebaseStorage storage = FirebaseStorage.instance;
//Create a reference to the location you want to upload to in firebase
StorageReference reference = storage.ref().child("profileImages/myImageUid");

最后开始上传，等到完成再获取网址图片

//Upload the file to firebase
        StorageUploadTask uploadTask = reference.putFile(image);
    
        StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
    
        // Waits till the file is uploaded then stores the download url
        String url = await taskSnapshot.ref.getDownloadURL();
    

完整代码

FirebaseStorage storage = FirebaseStorage.instance;

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

    } on PlatformException catch (e) {
      //PlatformException is thrown with code : this happen when user back with don't
      //selected image or not approve permission so stop method here 
      // check e.code to know what type is happen
      return;
    }

    //Create a reference to the location you want to upload to in firebase
    StorageReference reference =
        storage.ref().child("profileImages/${user.id}");

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

    StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;

    // Waits till the file is uploaded then stores the download url
    String url = await taskSnapshot.ref.getDownloadURL();

Answer 3

对不起，我的回答迟了，但上面的答案有点老了，希望我的回答对你有帮助。下面的代码示例将适用于以下依赖项。

关于这个问题，它说我在上传后如何检索它。您可以使用下载 URL 来获取文件或图像，您可以下载它，也可以将其显示在 NetworkImage 小部件上以将其显示给您的用户。我在下面展示了如何获取下载 URL。

pubspec.yaml

dependencies
    image_picker: ^0.6.5
    firebase_storage: ^3.1.5

飞镖代码

//Creating a global Variable    
StorageReference storageReference = FirebaseStorage.instance.ref();
File _image;

void getImage(){
    _image = await ImagePicker.pickImage(source: ImageSource.gallery); 
}

void addImageToFirebase(){


    //CreateRefernce to path.
    StorageReference ref = storageReference.child("yourstorageLocation/");

    //StorageUpload task is used to put the data you want in storage
    //Make sure to get the image first before calling this method otherwise _image will be null.

    StorageUploadTask storageUploadTask = ref.child("image1.jpg").putFile(_image);

     if (storageUploadTask.isSuccessful || storageUploadTask.isComplete) {
          final String url = await ref.getDownloadURL();
          print("The download URL is " + url);
     } else if (storageUploadTask.isInProgress) {

          storageUploadTask.events.listen((event) {
          double percentage = 100 *(event.snapshot.bytesTransferred.toDouble() 
                               / event.snapshot.totalByteCount.toDouble());  
          print("THe percentage " + percentage.toString());
          });

          StorageTaskSnapshot storageTaskSnapshot =await storageUploadTask.onComplete;
          downloadUrl1 = await storageTaskSnapshot.ref.getDownloadURL();

          //Here you can get the download URL when the task has been completed.
          print("Download URL " + downloadUrl1.toString());

     } else{
          //Catch any cases here that might come up like canceled, interrupted 
     }

}

Answer 4

同时，有一个库可以帮助您...

1. 选择
2. 裁剪、压缩
3. 正在上传 一张图片到 Firebase 存储。

该库名为firebase_picture_uploader，可以这样使用（摘自Source）：

new PictureUploadWidget(
  onPicturesChange: profilePictureCallback,
  initialImages: _profilePictures,
  settings: PictureUploadSettings(onErrorFunction: onErrorCallback),
  buttonStyle: const PictureUploadButtonStyle(),
  buttonText: 'Upload Picture',
  enabled: true,
)

Firebase 图片上传器示例：

Answer 5

当您从图库或相机中挑选图像时

只需使用下面提到的函数来获取带有扩展名的文件名

basename(image.path)

然后将文件传递给firebase存储参考，并带有您要上传到的路径和文件名，您不必考虑文件的扩展名。

使用的库

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;
}

Answer 6

如果您使用的是 firebase_storage >= 5.0.0-dev.1，则 StorageReference 类已重命名为 Reference。

我的意思是较新版本的 Firebase 不使用以下格式：

// 将带有文件名的路径传递给 Firebase 存储参考 StorageReference reference = FirebaseHelper.firebaseStorage (). Child ("your_path/ $ fileName");

正确的应该是： Reference reference = FirebaseHelper.firebaseStorage (). Child ("your_path / $ fileName");

Answer 7

  ImagePicker imagePicker = ImagePicker();
      File file;
      String imageUrl;

// 图像选择器

  Future pickImageCamera() async {
    var image = await imagePicker.pickImage(source: ImageSource.camera);
    if (image != null) {
      setState(() {
        file = File(image.path);
      });
    }
  }

// 将选取的图像上传到 FireStore

  uploadProfileImage() async {
    Reference reference = FirebaseStorage.instance
        .ref()
        .child('profileImage/${Path.basename(file.path)}');
    UploadTask uploadTask = reference.putFile(file);
    TaskSnapshot snapshot = await uploadTask;
    imageUrl = await snapshot.ref.getDownloadURL();
    print(imageUrl);
  }

Answer 8

firebase_storage：^3.0.6， 图像选择器：^0.6.1 这两个库你一定会用到

之后获取图片

  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() 小部件。

Answer 9

ImagePicker 有助于从图库/相机中获取文件并使用 FirebaseStorage 上传。 getDownloadURL() 方法为我们提供了上传到 firebase 的下载 URL。

Future uploadImageToFirebase(BuildContext context) async {
        final picker = ImagePicker();
        final pickedFile = await picker.getImage(source: ImageSource. gallery);
        File image = new File(pickedFile.path);

        var reference = FirebaseStorage.instance.ref().child('last_image/car5'); // Modify this path/string as your need
        StorageUploadTask uploadTask = reference.putFile(file);
        StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
        taskSnapshot.ref.getDownloadURL().then(
              (value) => print("Download URL: $value"),
            );
      }

Answer 10

很晚才回答。但这可能会对某人有所帮助。 这是我首先从图库中获取图片然后将图片上传到 Firebase 的方法。我希望你会喜欢这种方法

XFile? image;
ImagePicker().pickImage(source: ImageSource.gallery,).then((value) {
        setState(() {
        image = value;
              });
  });
FirebaseStorage.instance.ref("desiredPathForImage/").putFile(File(image!.path))
 .then((TaskSnapshot taskSnapshot) {
  if (taskSnapshot.state == TaskState.success) {
      print("Image uploaded Successful");
      // Get Image URL Now
      taskSnapshot.ref.getDownloadURL().then(
      (imageURL) {
      print("Image Download URL is $imageURL");
      });
     } 
  else if (taskSnapshot.state == TaskState.running) {
      // Show Prgress indicator
      }
  else if (taskSnapshot.state == TaskState.error) {
      // Handle Error Here
      }
   });

Answer 11

  firebase_core: ^1.10.3
  firebase_analytics: ^9.0.0
  firebase_messaging: ^11.2.1
  firebase_storage: ^10.2.4
  image_picker: ^0.8.4+4

import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;


Future<void> uploadImageToFirebase(XFile? image) async {
Directory appDocDir = await getApplicationDocumentsDirectory();
String filePath = 'directoryName/${image?.path.split("/").last}';
File file = File(image?.path ?? "");
try {
  TaskSnapshot uploadTask = await firebase_storage.FirebaseStorage.instance
      .ref(filePath)
      .putFile(file);
  String? url = await uploadTask.ref.getDownloadURL();
  print("download url : $url");
  vm.pickedImages[index] = url;
} on FirebaseException catch (e) {
  // e.g, e.code == 'canceled'
}

}