javascript - Firebase 网络文件上传代码:“app/duplicate-app”
问题描述
我试图在我的网站上通过 firebase 上传图像和视频,第一次上传有效,第二次上传在我的控制台上显示此消息:
firebase.js:1 Uncaught {code: "app/duplicate-app", message: "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).", name: "[DEFAULT]",堆栈:“[DEFAULT]:Firebase:名为'[DEFAULT]...(https://code.jquery.com/jquery-3.3.1.js:4991:28)”的Firebase应用程序代码:“app/duplicate-app ” 消息:“Firebase:名为“[DEFAULT]”的 Firebase 应用程序已经存在(应用程序/重复应用程序)。” 名称:“[DEFAULT]”堆栈:“[DEFAULT]:Firebase:名为“[DEFAULT]”的 Firebase 应用程序已存在(app/duplicate-app)。↵ 出错(https://www.gstatic.com/firebasejs/ 5.5.3/firebase.js:1:49452 )↵ 在 Object.initializeApp ( https://www.gstatic.com/firebasejs/5.5.3/firebase.js:1:)↵ 在 HTMLAnchorElement。( http://xxx.tv/theme/js/js.js:93:13 )↵ 在 HTMLAnchorElement.dispatch ( https://code.jquery.com/jquery-3.3.1.js:5183:27 )↵在 HTMLAnchorElement.elemData.handle ( https://code.jquery.com/jquery-3.3.1.js:4991:28 )" 原型:错误
此外,当我尝试上传视频不起作用时,它会返回一条消息,指出我没有发送任何数据:
未捕获的 e {code_: "storage/invalid-argument", message_: "Firebase Storage: Invalid argument in
put
at index 0: Expected Blob or File.", 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
解决方案
firebase.initializeApp()
每个页面加载只能调用一次。现在,您正在为每次上传调用它。
推荐阅读
- javascript - 你如何用javascript反向填充进度条?
- resources - 在 SpringBoot 项目中,资源文件夹在底部不存在
- javascript - .js 文件在被 HTML 脚本调用时检测为 type:html。“即使其 MIME 类型(“text/html”)不是有效的 JavaScript MIME 类型,也已加载。”
- javascript - Javascript:字符串比较代码的解读
- git - 如何从我的 Git 存储库中删除补丁文件?
- python - 在 Databricks 上使用 Python/Spark 操作示例 json 列表
- c++ - OpenCv读/写视频色差
- flutter - 在颤动中按下后如何更改 ElevatedButton 的背景颜色,但我有三个所以选择时应该更改一个
- nlp - 如何通过规则合并 spaCy 中的实体
- javascript - 从函数内部的for循环返回值