将下载网址插入到Firebase数据库父节点网站

Question

我想显示上传的图像并转换为Firebase下载网址，然后存储到Firebase数据库表中。现在我的问题是我无法将下载 url 插入到我想要的表中。

这是我的代码

var database = firebase.database();
database.ref('products/cooking/sugar/').on('child_added', function(data) {
add_data_table(data.val().brand,data.val().desc,data.val().price,data.val().pic,data.key);
var lastkey = data.key;
nextkey = parseInt(lastkey)+1;
});
database.ref('products/cooking/sugar/').on('child_changed', function(data) {
update_data_table(data.val().brand,data.val().desc,data.val().price,data.val().price,data.key)
});
database.ref('products/cooking/sugar/').on('child_removed', function(data) {
remove_data_table(data.key)
});  
function add_data_table(brand,price,desc,pic,key){
$("#card-list").append('<div class="column is-2" id="'+key+'"><div class="card"><div class="card-content"><div class="media"><div class="media-content"><p class="title is-2">'+brand+'</p><p class="subtitle is-4">@'+desc+'</p><p class="subtitle is-4">'+price+'</p></div></div></div><footer class="card-footer"><a href="#" data-key="'+key+'" class="card-footer-item btnEdit">Edit</a><a href="#" class="]card-footer-item btnRemove"  data-key="'+key+'">Remove</a></footer></div></div>');
}
function update_data_table(brand,price,desc,pic,key){
$("#card-list #"+key).append('<div class="card"><div class="card-image"><figure class="image is-4by3"><img src="'+pic +'"></figure></div><div class="card-content"><div class="media"><div class="media-content"><p class="title is-2">'+brand+'</p><p class="subtitle is-4">@'+desc+'</p><p class="subtitle is-4">'+price+'</p></div></div></div><footer class="card-footer"><a href="#" class="card-footer-item btnEdit"  data-key="'+key+'">Edit</a><a  data-key="'+key+'" href="#" class="card-footer-item btnRemove">Remove</a></footer></div>');
}
function remove_data_table(key){
$("#card-list #"+key).remove();
}
function new_data(brand,desc,price,pic,key){
database.ref('products/cooking/sugar/' + key).set({
brand: brand,
desc: desc,
price : price,
pic : pic
});
}
function update_data(brand,desc,price,pic,key){
database.ref('products/cooking/sugar/' + key).update({
brand: brand,
desc: desc,
price : price,
pic : pic
});
}
$( "#btnAdd" ).click(function() {
$("#txtbrand").val("");
$("#txtDesc").val("");
$("#txtPrice").val("");
$("#fileButton").val("");
$("#txtType").val("N");
$("#txtKey").val("0");
$( "#modal" ).addClass( "is-active" );
});
$("#btnSave" ).click(function() {
if($("#txtType").val() == 'N'){
database.ref('products/cooking/sugar/').once("value").then(function(snapshot) {
if(snapshot.numChildren()==0){
nextkey = 1;
}
new_data($("#txtbrand").val(),$("#txtDesc").val(),$("#txtPrice").val(),$("#fileButton").val(),nextkey);
});
}
else{
update_data($("#txtbrand").val(),$("#txtDesc").val(),$("#txtPrice").val(),$("#fileButton").val(),$("#txtKey").val());
}
$("#btnClose").click();
});
$(document).on("click",".btnEdit",function(event){
event.preventDefault();
key = $(this).attr("data-key");
database.ref('products/cooking/sugar/'+key).once("value").then(function(snapshot){
$("#txtbrand").val(snapshot.val().brand);
$("#txtDesc").val(snapshot.val().desc);
$("#txtPrice").val(snapshot.val().price); 
$("#fileButton").val(snapshot.val().pic); 
$("#txtType").val("E"); 
$("#txtKey").val(key); 
});
$( "#modal" ).addClass( "is-active" );
});
$(document).on("click",".btnRemove",function(event){
event.preventDefault();
key = $(this).attr("data-key");
database.ref('products/cooking/sugar/' + key).remove();
})
$( "#btnClose,.btnClose" ).click(function() {
$( "#modal" ).removeClass( "is-active" );
});
// ============== Start of Upload Image ===================//
var Uploader = document.getElementById('Uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e){
// Get File
var file = e.target.files[0];
// Create a storage ref
var storageRef = firebase.storage().ref('products/' + file.name);
//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 error(err){
},
function complete(){
}
);
});
var storageRef = firebase.storage().ref();
var spaceRef = storageRef.child('products/'+file.name);
var spaceRef = firebase.database('products/');
storageRef.child('products/'+file.name).getDownloadURL().then(function(url) 
{
console.log("bsbdsbsdbd");
var test = url;
alert("hfdghjghj",url);
}).catch(function(error) { });

这是我的火力基地数据

{
"7" : {
"brand" : "fg",
"desc" : "gfg",
"pic" : "C:\fakepath\ocala-social-media-setup-1.png",
"price" : "34"
},
"8" : {
"brand" : "dhf",
"desc" : "hj",
"pic" : "",
"price" : "67"
}
}

我需要将转换后的上传图像显示到我的 HTML 文件中。 谁能帮我解决这个问题。 请。

Answer 1

如果我理解正确的话，

fileButton.addEventListener('change', function(e) {
// Get File
var file = e.target.files[0];
// Create a storage ref
var storageRef = firebase.storage().ref('products/' + file.name);
//upload file
var task = storageRef.put(file);
//update progress bar
task.on('state_changed', function(snapshot){
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
},
function(error) {
console.error('Error', error);
},
function() {
task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('downloadURL', downloadURL);
// Save to your database
firebase.database().ref('your/database/ref/').set({downloadURL: downloadURL});
});
});
});

中医国际