Firebase 网页文件上传代码："app/duplicate-app"

Question

im 尝试通过 Firebase 在我的网站上上传图片和视频， 第一次上传有效，第二次上传在我的控制台上显示以下消息：

火力基地.js：1 未捕获 {code： "app/duplicate-app"， message： "Firebase： Firebase App named '[DEFAULT]' 已存在 (app/duplicate-app(."， name： "[DEFAULT]"， stack： "[DEFAULT]： Firebase： Firebase App named '[DEFAULT]...(https://code.jquery.com/jquery-3.3.1.js:4991:28("} 代码："应用程序/复制应用程序" 消息："Firebase：名为'[DEFAULT]'的 Firebase 应用已存在(应用/复制应用(。 名称："[默认]" stack："[DEFAULT]：Firebase：名为'[DEFAULT]'的Firebase App已经存在(app/duplicate-app(.↵ at error (https://www.gstatic.com/firebasejs/5.5.3/firebase.js:1:49452(↵ at Object.initializeApp (https://www.gstatic.com/firebasejs/5.5.3/firebase.js:1:48095(↵ at fileInput (http://xxx.tv/theme/js/js.js:115:12(↵ at HTMLAnchorElement.(http://xxx.tv/theme/js/js.js:93:13(↵ at HTMLAnchorElement.dispatch (https://code.jquery.com/jquery-3.3.1.js:5183:27(↵ at HTMLAnchorElement.elemData.handle (https://code.jquery.com/jquery-3.3.1.js:4991:28("原型：错误

此外，当 im 尝试上传视频不起作用时，它会返回一条消息，指出 im 不发送任何数据：

未捕获 e {code_： "storage/invalid-argument"， message_： "Firebase Storage： 索引 0 处的put参数无效：预期的 blob 或文件"， serverResponse_： null， name_： "FirebaseError"}

.HTML：

<label for="videoUpload">
<i for="videoUpload" class="material-icons videoUploadIcon">videocam</i>
<input id="videoUpload" class="videoUpload" type="file" accept="video/*" style="display: none;">
</label>

JS 文件

$(document).ready(function(){
var config = {
apiKey: "",
authDomain: "web-test-.com",
databaseURL: "com",
projectId: ",
storageBucket: ".appspot.com",
messagingSenderId: ""
};
firebase.initializeApp(config);
});
$(function(){
$("#postBtn").on('click', function(e){
e.preventDefault();
var postField = $('#postField').val();
var image = $('#imgupload')[0].files[0];
var video = $('.videoUpload')[0].files[0];
fileInput(postField,image,video);
$('#contentToUpload').hide();
$('.videoUploadIcon').show();       
});
});
// <!-- ADD POST -->
// INPUT FILE FUNCTION
function fileInput(postField, image, video) {
if (image != null) {
uploadFile(image)
} else if (video != null) {
uploadFile(video)
} else {
console.log('youre upload cant be blank!');
}

}

function uploadFile(file) {
var database = firebase.database();
var storage = firebase.storage();
const storageRef = storage.ref();
var generatedName = Math.random().toString(36).substr(2, 20);
const uploadTask = storageRef.child(`images/${generatedName}`).put(file); //create a child directory called images, and place the file inside this directory
uploadTask.on('state_changed', (snapshot) => {
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, function(snapshot) {
var percent = snapshot.bytesTransferred / snapshot.totalBytes * 100;
$('.progress').css("display", "block");
$('.numPercentage').css("display", "block");
$('.determinate').width(parseInt(percent) + '%');
$('.numPercentage').html(parseInt(percent) + '%');
});
}, (error) => {
// Handle unsuccessful uploads
console.log(error);
}, () => {
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL);
});
console.log('success');
setTimeout(function() {
$('.numPercentage').fadeOut(1000).css("display", "none");
$('.determinate').fadeOut(1000).css("display", "none");
$('.progress').fadeOut(1000).css("display", "none");
$('.numPercentage').val("");
$('.determinate').val("");
}, 2000);
document.getElementById("postField").value = null;
document.getElementById("imgupload").value = null;
document.getElementById("videoUpload").value = null;
setTimeout(function() {
$('.feed-posts').load('/php/posts.php').fadeIn('slow');
}, 1000);
});
}
}
// INPUT FILE FUNCTION

Answer 1

每次页面加载只能调用firebase.initializeApp()一次。 现在，您正在为每次上传调用它。