时间戳

首页 > 解决方案 > 如何将文件上传到 Firebase 存储？

javascript - 如何将文件上传到 Firebase 存储？

问题描述

<head>
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-app.js"> 
</script>
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-auth.js"> 
</script>
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-database.js"> 
</script>
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-storage.js"> 
</script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<input type="file" value="upload" id="fileButton"/>
<progress value="0" max="100" id="uploader">0%</progress>
</body>
</html>

////Inside index.js////

var firebaseConfig = {
apiKey: "***",
authDomain: "***",
databaseURL: "***",
projectId: "***",
storageBucket: "***m",
messagingSenderId: "***",
appId: "***", 
};

// Initialize Firebase //
firebase.initializeApp(firebaseConfig);

// Upload File //
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');

fileButton.addEventListener('change', function(e) {
var file = evt.target.files[0];
var storageRef = firebase.storage().ref('files_new/' + file.name);
var task = storageRef.put(file);

task.on('state_changed', 

function progress(snapshot) {
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
},
function error(err) {
console.error();
},
function complete() {
console.log('success!');
}
);
});

我究竟做错了什么？文件没有上传到存储和进度条也不起作用。

配置中的所有地址和密钥都是正确的，因为 index.js 中的其他功能正在运行，即身份验证

我从这个链接做了整个事情：https ://www.youtube.com/watch?v=SpxHVrpfGgU

标签： javascriptnode.jsfirebasefile-uploadfirebase-storage

解决方案

我认为有什么问题是参考。首先获取存储参考，然后创建一个孩子。这是一个有效的例子（至少对我来说）：

const storageRef = firebase.storage().ref();
const fileRef = storageRef.child('files_new/' + file.name);
const task = fileRef.put(file);

task.on('state_changed',
  (snapshot) => { /* progress */ },
  (error) => { /* error */ },
  () => { /* complete */ }
)

file像上面提到的那样处理你的文件。

推荐阅读