如何将文件上传到 Firebase 存储？答案

【问题标题】：How do I upload a file to Firebase storage?如何将文件上传到 Firebase 存储？
【发布时间】：2020-04-08 18:07:47
【问题描述】：

<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

【问题讨论】：

您检查过控制台吗？它显示什么错误？
是的，我查过了。控制台中没有错误。
您访问那里检查过存储吗？尝试在每个事件上添加控制台日志。这将告诉您它在哪里失败。或者如果事件正在发生。
存储空间仍然是空的。我添加了 console.log('success!');在函数中完成（）{ console.log（'成功！'）； } 仍然没有在控制台中得到任何东西。
我不确定这是否有帮助，你能在所有 JS 文件的开头添加 JQuery 引用吗？

标签： javascript node.js firebase file-upload firebase-storage

【解决方案1】：

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

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 正在处理您的文件。

【讨论】：

谢谢，但我很难理解您的代码。我是从youtube.com/watch?v=SpxHVrpfGgU的官方firebase视频中做到这一点的@
你有什么不清楚的地方，我可以告诉你吗？与您的代码的区别仅在我的 sn-p 的第 1 行和第 2 行。您需要为您的存储参考创建一个子节点。
我不知道该怎么做。我是新来的。我正在从文档和视频中学习做事
只需将我的代码中的var storageRef = firebase.storage().ref('files_new/' + file.name); 替换为const storageRef = firebase.storage().ref(); const fileRef = storageRef.child('files_new/' + file.name);。
还是不行。这是它现在的样子var file = evt.target.files[0]; var storageRef = firebase.storage().ref(); var fileRef = storageRef.child('files_new/' + file.name); var task = fileRef.put(file); task.on('state_changed', (snapshot) => { /* progress */ }, (error) => { /* error */ }, () => { /* complete */ } )