Flutter云存储插件firebase_storage_web的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter云存储插件firebase_storage_web的使用

firebase_storage_web是firebase_storage在Web平台上的实现。它允许开发者在Flutter Web应用中与Firebase Storage进行交互，包括上传、下载文件等操作。

开始使用

要开始使用Firebase Storage，请参考官方文档。更多关于Firebase Storage的信息，请访问Firebase官网。

使用getData()下载文件

在Web平台上使用Reference::getData()时，必须确保您的存储桶具有正确的CORS（跨源资源共享）配置，否则浏览器的安全机制将阻止您访问下载的数据，并可能抛出类似以下的异常：

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/...example.txt?alt=media&token=1234-4321-1234-4321-12341234' from origin 'http://your-web-app.domain.com:PORT' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

或者

browser_client.dart:87 GET https://firebasestorage.googleapis.com/v0/b/...example.txt?alt=media&token=1234-4321-1234-4321-12341234 net::ERR_FAILED

或者

Error: XMLHttpRequest error.
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 894:28                get current
packages/http/src/browser_client.dart 84:22                                       <fn>

为了解决这些问题，需要在Google Cloud Storage Bucket中启用CORS响应头，具体步骤可以参考下载文件指南。

在example应用中，确保有一个cors.json文件，内容如下：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

然后使用gsutil命令设置CORS：

gsutil cors set cors.json gs://my-example-bucket.appspot.com

更多关于CORS在Google Cloud Platform中的信息，请参阅配置跨源资源共享(CORS)。

示例代码

下面是一个完整的示例demo，展示了如何在Flutter Web应用中使用firebase_storage_web插件来下载文件。

添加依赖

首先，在pubspec.yaml文件中添加firebase_storage和firebase_core依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_storage: latest_version

初始化Firebase

在项目的入口文件（如main.dart）中初始化Firebase：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Storage Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

下载文件

创建一个页面用于展示下载文件的功能：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Uint8List? imageData;

  Future<void> downloadFile() async {
    final ref = FirebaseStorage.instance.ref().child('path/to/your/file');
    try {
      final data = await ref.getData(); // This will throw an exception if CORS is not configured correctly
      setState(() {
        imageData = data;
      });
    } catch (e) {
      print("Error downloading file: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Download File Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: downloadFile,
              child: Text('Download Image'),
            ),
            if (imageData != null)
              Image.memory(imageData!),
          ],
        ),
      ),
    );
  }
}

此代码片段展示了如何通过点击按钮触发从Firebase Storage下载图片，并在成功下载后显示该图片。请确保已正确配置CORS以避免下载失败的问题。


更多关于Flutter云存储插件firebase_storage_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter云存储插件firebase_storage_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用firebase_storage_web插件进行云存储操作的代码示例。这个例子将展示如何上传和下载文件到Firebase Storage。

首先，确保你已经在pubspec.yaml文件中添加了firebase_core, firebase_storage, 和 firebase_storage_web依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0 # 请根据最新版本调整
  firebase_storage: ^10.0.0 # 请根据最新版本调整
  firebase_storage_web: ^1.0.0 # 请根据最新版本调整

然后，在web/index.html中添加Firebase配置（注意，这通常用于Web应用，对于iOS和Android应用，配置会在各自的平台上设置）：

<!DOCTYPE html>
<html>
<head>
  <title>flutter_app</title>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-storage.js"></script>
  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</head>
<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

接下来，在你的Flutter项目中初始化Firebase并使用Firebase Storage。以下是一个简单的示例，展示如何上传和下载文件：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:path_provider/path_provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: FirebaseOptions(
      apiKey: "YOUR_API_KEY",
      appId: "YOUR_APP_ID",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
    ),
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorageExample(),
    );
  }
}

class StorageExample extends StatefulWidget {
  @override
  _StorageExampleState createState() => _StorageExampleState();
}

class _StorageExampleState extends State<StorageExample> {
  final FirebaseStorage storage = FirebaseStorage.instance;
  Reference? _imageRef;
  Uint8List? _imageData;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firebase Storage Example'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () async {
              await _uploadImage();
            },
            child: Text('Upload Image'),
          ),
          ElevatedButton(
            onPressed: () async {
              await _downloadImage();
            },
            child: Text('Download Image'),
          ),
          if (_imageData != null)
            Image.memory(_imageData!),
        ],
      ),
    );
  }

  Future<void> _uploadImage() async {
    final Uint8List imageBytes = await _takeScreenshot();
    _imageRef = storage.ref().child('images/screenshot.png');
    await _imageRef!.putData(imageBytes);
    print('Image uploaded');
  }

  Future<Uint8List> _takeScreenshot() async {
    RenderRepaintBoundary boundary =
        globalKey.currentContext!.findRenderObject()! as RenderRepaintBoundary;
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    return byteData.buffer.asUint8List();
  }

  final GlobalKey globalKey = GlobalKey();

  Future<void> _downloadImage() async {
    if (_imageRef == null) return;
    final Uint8List? data = await _imageRef!.getData();
    setState(() {
      _imageData = data;
    });
    print('Image downloaded');
  }
}

注意：

  1. 上面的代码示例中，_takeScreenshot方法是为了演示如何获取一个图像（在这个例子中是屏幕的截图）。在实际应用中，你可能需要从文件选择器或其他来源获取图像。
  2. 确保你已经正确设置了Firebase项目，并且在Firebase控制台中启用了Storage服务。
  3. 替换YOUR_API_KEY, YOUR_AUTH_DOMAIN, YOUR_PROJECT_ID, YOUR_STORAGE_BUCKET, YOUR_MESSAGING_SENDER_ID, 和 YOUR_APP_ID为你的Firebase项目配置。

这个示例展示了如何使用firebase_storage_web插件在Flutter Web应用中上传和下载文件。如果你需要在移动平台上使用Firebase Storage，你需要使用相应的Firebase SDK并进行类似的配置。

回到顶部