Flutter Web -图像无法上传至Firebase存储

3okqufwl  于 2022-12-27  发布在  Flutter
关注(0)|答案(2)|浏览(166)

我可以从Image Picker Web中选择图像列表并将其显示在我的应用程序上。

Future _pickMultiImages() async {
    final images = await ImagePickerWeb.getMultiImagesAsWidget();

    _pickedImages.clear();
    if (images != null) _pickedImages.addAll(images);
    setState(() {
          _photo = _pickedImages;
    });

我无法上传图片列表(或作为单独的图片)到Firebase存储。总是有一些完整的问题。

void UploadImage(List<Image> pickedImages) async {
  Directory appDocDir = await getApplicationDocumentsDirectory();
  String appDocPath = appDocDir.path;
  print(appDocPath);
  final filePath = "${appDocPath}/path/to/mountains.jpg";
  final file = File(filePath);

// Create the file metadata
  final metadata = SettableMetadata(contentType: "image/jpeg");

// Create a reference to the Firebase Storage bucket
  final storageRef = FirebaseStorage.instance.ref();

// Upload file and metadata to the path 'images/mountains.jpg'
  final uploadTask =
      storageRef.child("images/mountains.jpg").putFile(file, metadata);
}

我知道上面的代码还没有适合我的应用程序,原因是这样你就可以看到默认代码。我没有得到过去的appDocDir = await getApplicationDocumentsDirectory()我总是得到这个:

void _complete() {
     assert(_completed == null);
     _completed = true;
     _primaryCompleter.complete();
     _secondaryCompleter?.complete();
}
e0bqpujr

e0bqpujr1#

我假设你使用的是path_provider软件包,但是这个软件包不支持web。
作为一种选择,看看这个StackOverflow帖子:

vatpfxk5

vatpfxk52#

有几个解决方案,但你可以选择什么是伟大的你。

1

使用当前package拾取图像时,您必须更改保存List<Image>中拾取图像的格式

Future _pickMultiImages() async {
    final images = await ImagePickerWeb.getMultiImagesAsWidget();

至-List<Uint8List>

Future _pickMultiImages() async {
    final images = await ImagePickerWeb.getMultiImagesAsBytes();

然后,您可以使用下面的firebase函数轻松地发送所有图像,但只需更改函数参数,并为storageRef找到一个唯一的子名称。

2

使用这个软件包file_selector,你应该可以选择你的图片,预览它们并将它们发送到firebase。
我添加了一些函数,您可以直接使用这些函数来实现此目的
挑选网页图像并以XFile返回,这样它们就可以以任何其他格式使用。

Future<List<XFile>> _pickWebImages() async {
    final typeGroup = XTypeGroup(label: 'images', extensions: ['jpg', 'png']);
    final images = await openFiles(acceptedTypeGroups: [typeGroup]);

    if (images == null) return null;

    return images;
  }

这是一个firebase上传函数的例子,你可以发送图片列表,它应该会为你上传。

Future<void> uploadWebImages(List<XFile> images) async {
    // Create the file metadata
    final metadata = SettableMetadata(contentType: 'image/jpeg');

    // Create a reference to the Firebase Storage bucket
    final storageRef = FirebaseStorage.instance.ref('images');

    // Upload files and metadata to the bucket
    for (final image in images) {
      final data = await image.readAsBytes();
      final uploadTask = storageRef.child(image.name).putData(
            data,
            metadata,
          );

      await uploadTask;
    }

  }

相关问题