Javascript Can'；无法上传到Firebase/FireStorage？
我正在尝试（第一次）在firebase/storage上上传图像，但成功率非常有限 我试图遵循以下文件： 下面的代码基于文档底部标题为“完整示例”的段落 但是当我希望看到上传的图像时，我只得到一个10字节的文件，它是不可显示的。 它显示了一个错误：加载预览时出错 当我在firebase控制台中单击它时 由于编写了一些内容（使用正确的名称：SoAf.jpg），我知道我没有权限问题。但是很明显，我没有做我应该做的事情来正确上传图片 如果有人能看到这段代码中的错误，那就太好了Javascript Can'；无法上传到Firebase/FireStorage？,javascript,firebase,firebase-storage,Javascript,Firebase,Firebase Storage,我正在尝试（第一次）在firebase/storage上上传图像，但成功率非常有限 我试图遵循以下文件： 下面的代码基于文档底部标题为“完整示例”的段落 但是当我希望看到上传的图像时，我只得到一个10字节的文件，它是不可显示的。 它显示了一个错误：加载预览时出错 当我在firebase控制台中单击它时 由于编写了一些内容（使用正确的名称：SoAf.jpg），我知道我没有权限问题。但是很明显，我没有做我应该做的事情来正确上传图片 如果有人能看到这段代码中的错误，那就太好了 <!DOCTYPE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="">
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.5/firebase.js"></script>
</head>
<body>
<form action='UpldTest3.html' method='post' enctype='multipart/form-data'>
National flag: <input type='file' accept='image/*' name='photo' id='photo'><br/>
<input type='submit' name='ValNatFlag' style='font-size:20px' value='Submit Picture'><br/>
</form>
<script>
// Firebase Initialization :
var config = {
apiKey: "myyKeyyy",
authDomain: "......firebaseapp.com",
databaseURL: "https://......firebaseio.com",
projectId: "....",
storageBucket: "........appspot.com",
messagingSenderId: "........."
},
app = firebase.initializeApp(config),
db = firebase.firestore(app);
</script>
<script>
var file = new File(["fooFOO.jpg"], "SoAf.jpg", {type: "image/jpeg"});
// Create the file metadata
var metadata = {
contentType: 'image/jpeg'
};
var storageRef = firebase.storage().ref();
// Upload file and metadata to the object 'images/SoAf.jpg'
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);
// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
function(snapshot) {
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED: // or 'paused'
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
}
}, function(error) {
// A full list of error codes is available at
// https://firebase.google.com/docs/storage/web/handle-errors
switch (error.code) {
case 'storage/unauthorized':
// User doesn't have permission to access the object
break;
case 'storage/canceled':
// User canceled the upload
break;
//...
case 'storage/unknown':
// Unknown error occurred, inspect error.serverResponse
break;
}
}, function() {
// Upload completed successfully, now we can get the download URL
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL);
});
});
</script>
</body>
</html>
国旗：
//Firebase初始化：
变量配置={
apiKey:“Myykeyy”，
authDomain:“……firebaseapp.com”，
数据库URL:“https://......firebaseio.com",
投射物：“…”，
storageBucket:“……appspot.com”，
messagingSenderId:“……”
},
app=firebase.initializeApp（配置），
db=firebase.firestore（应用程序）；
var file=新文件（[“fooFOO.jpg”]，“SoAf.jpg”，{type:“image/jpeg”}）；
//创建文件元数据
变量元数据={
contentType:“图像/jpeg”
};
var storageRef=firebase.storage（）.ref（）；
//将文件和元数据上载到对象“images/SoAf.jpg”
var uploadTask=storageRef.child（'images/'+file.name）.put（文件，元数据）；
//侦听状态更改、错误和上载完成情况。
uploadTask.on（firebase.storage.TaskEvent.STATE\u已更改，//或“STATE\u已更改”
功能（快照）{
//获取任务进度，包括上载的字节数和要上载的总字节数
var progress=（snapshot.bytesttransfered/snapshot.totalBytes）*100；
log（'Upload is'+progress+'%done'）；
交换机（snapshot.state）{
案例firebase.storage.TaskState.PAUSED://或“PAUSED”
log（'上载已暂停'）；
打破
案例firebase.storage.TaskState.RUNNING://或“RUNNING”
log（“正在运行上载”）；
打破
}
}，函数（错误）{
//有关错误代码的完整列表，请访问
// https://firebase.google.com/docs/storage/web/handle-errors
开关（错误代码）{
“存储/未授权”案例：
//用户没有访问该对象的权限
打破
案例“存储/取消”：
//用户取消了上传
打破
//...
案例“存储/未知”：
//发生未知错误，请检查错误。serverResponse
打破
}
}，函数（）{
//上传成功，现在我们可以获得下载URL
uploadTask.snapshot.ref.getDownloadURL（）.then（函数（downloadURL））{
log（'File available at'，downloadURL）；
});
});
<img src="" id="imgPic" alt="" height="80px">
<input type='file' accept='image/*' name='photo' id='photo'>
var fileToRead = document.getElementById("photo");
fileToRead.addEventListener("change", function(event) {
var image = document.getElementById("imgPic");
image.src = URL.createObjectURL(event.target.files[0]) ;
var tobeSaved = event.target.files[0] // save on storage
}, false);