Firebase第三方存储对接教程

1. 在Firebase创建项目并获取配置信息

- 访问 [Firebase 控制台](https://console.firebase.google.com/) 并使用您的 Google 帐号登录。

- 点击 "创建项目"，按照指引填写项目名称等信息，然后点击 "继续"。

- 在创建完项目后，接着创建一个web应用，创建完后会看到 Firebase 配置信息，包括 API 密钥等。将这些信息复制下来，稍后会在你的js代码中使用。

2. 引入Firebase库

<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-storage-compat.js"></script>

3. 初始化Firebase

// Firebase参数 - 使用您在 Firebase 控制台中获取的实际配置信息
const 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"
};

// 初始化Firebase应用
firebase.initializeApp(firebaseConfig);
const storage = firebase.storage();

4. 上传文件

// 上传文件按钮点击处理程序
$('#guideImage').on('change', function() {
    var file = this.files[0];
    if (file) {
        // 创建一个Storage引用
        const storageRef = storage.ref('images/' + file.name);

        // 上传文件
        const uploadTask = storageRef.put(file);

        // 监听上传状态
        uploadTask.on('state_changed',
            (snapshot) => {
                // 获取上传进度, 包括上传的字节数和总字节数
                const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log('Upload is ' + progress + '% done');
            },
            (error) => {
                // 处理上传错误
                console.error('Upload failed:', error);
            },
            () => {
                // 上传完成后处理
                uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                    console.log('File available at', downloadURL);
                    // 拿到downloadURL后就可以把他用到别的地方啦
                });
            }
        );
    }
});