个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试(第一次)在 firebase/storage 上上传图像，但成功率非常有限。
我尝试遵循此文档:https://firebase.google.com/docs/storage/web/upload-files
下面的代码基于文档底部标题为完整示例的段落。
但是当我期望看到上传的图像时，我只得到一个十字节的文件，该文件无法显示。它显示一个错误:加载预览时出错当我在 Firebase 控制台中单击它时。
自从写了一些东西(使用正确的名称:SoAf.jpg)我知道我没有权限问题。但显然我没有做我应该做的事情来正确上传图像。
如果有人能看出这段代码有什么问题，那就太好了。
<!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>
最佳答案
您可以只监听文件更改并获取文件
<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);
关于javascript - 无法上传到 Firebase/FireStorage？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53152388/
24
4
0
我是一名优秀的程序员,十分优秀！