Firebase Storage Web：如何上传文件
Posted
技术标签:
【中文标题】Firebase Storage Web：如何上传文件【英文标题】：Firebase Storage Web: How to upload a file 【发布时间】：2017-05-09 08:01:13 【问题描述】：我在我的网站上添加了以下功能。我正在使用 Firebase 存储，但由于某种原因，它似乎无法正常工作，我不知道为什么。
当您上传文件时，进度条应显示将文件保存/上传到 Firebase 存储的进度，但事实并非如此。 Firebase 已初始化，我知道它可以工作。
如果有人可以帮助我并告诉我为什么该功能无法按上述方式工作以及如何修复它，我将不胜感激。
function AddMed()
var uploader = document.getElementById("uploader");
var fileButton = document.getElementById("fileButton");
var email = sessionStorage.getItem("email");
//Listen for file selection
fileButton.addEventListener('change', function (e)
// Get File
var file = e.target.files[0];
//Create a storage ref
var storageRef = firebase.storage().ref('file/' + file.name);
/** folder name will be email,
Will have to transfer variable from page to page and files will be .jpeg**/
//Upload file
var task = storageRef.put(file);
//Update progress bar
task.on('state_changed',
function progress(snapshot)
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
,
function complete()
);
);
【问题讨论】：
上传过程是否正常，您希望进度条正常工作还是整个过程？ @maximilian_cs 整个过程不起作用 【参考方案1】：-
首先更改安全规则
service firebase.storage
match /b/bucket/o
match /allPaths=**
allow read, write: if request.auth == null;
-
创建文件
<!DOCTYPE html>
<html>
<head>
<title>Firebase Web Basics</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,700" rel="stylesheet">
<script src="https://use.fontawesome.com/939e9dd52c.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="mainDiv" align="right">
<h1 align="left">Firebase File Upload</h1>
<progress id="uploader" value="0" max="100">0%</progress>
<input type="file" id="fileButton" value="upload"/>
</div>
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script>
// Initialize Firebase
var config =
apiKey: "******************************",
authDomain: "******************************",
databaseURL: "******************************",
storageBucket: "******************************",
messagingSenderId: "******************************"
;
firebase.initializeApp(config);
//-------------------------------------
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e)
var file = e.target.files[0];
var storageRef = firebase.storage().ref('img/'+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)
,function complete()
);
);
</script>
<script src="fileup.js">
</script>
</body>
</html>【讨论】：
这比google的例子好：firebase.google.com/docs/storage/web/upload-files 经过三个小时的工作，我找到了这个答案谢谢 基本上，anything 比 google 示例好以上是关于Firebase Storage Web：如何上传文件的主要内容，如果未能解决你的问题，请参考以下文章
如何将视频上传到Firebase Storage for React App
如何将多个（不同）文件上传到 Cloud Storage Firebase？
Vuejs + Firebase Storage 将多个图像上传到 Firebase Storage 并将所有 downloadURL 推送到 Firestore