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后就可以把他用到别的地方啦
});
}
);
}
});