火柴图像检索

Question

我半途而废地知道我的代码出了什么问题，但我找不到错误的确切位置。我试图上传图像到我的数据库和存储，然后通过存储在实时数据库中的url检索图像，但是每当我上传图像时，它不会存储在我的实时数据库中，它只是存储在存储中，所以检索代码不能工作。我目前存储的一幅图像被称为“景观”。

JavaScript代码：

// variables
            var imgName, ImgUrl;
            var files = [];
            var reader = new FileReader();

// select image

            document.getElementById("select").onclick = function(e){
                var input = document.createElement('input');
                input.type= 'file';
                input.click();

                input.onchange = e => {
                    files = e.target.files;
                    reader = new FileReader();
                    reader.onload = function(){
                        document.getElementById("myimg").src = reader.result;

                    }
                    reader.readAsDataURL(files[0]);
                }
                input.click();
            }

// upload image
            document.getElementById('upload').onclick = function(){
                ImgName = document.getElementById('namebox').value;
                var uploadTask = firebase.storage().ref('Images/'+ImgName+".png").put(files[0]);

                uploadTask.on('state_changed', function(snapshot){
                    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                    document.getElementById('UpProgress').innerHTML = 'Upload'+progress+'%';
                },
                function(error){
                    alert('error in saving image');

                },
                function(){
                    uploadTask.snapshot.ref.getDownloadURL().then(function(url){
                        ImgUrl = url;
                    });
                    firebase.database().ref('Pictures/'+ImgName).set({
                        Name: ImgName,
                        Link: ImgUrl
                    });
                alert('image added successfully');
                }
                );
            }

// retrieve image

            document.getElementById('retrieve').onclick = function(){
                ImgName = document.getElementById('namebox').value;
                firebase.database().ref('Pictures/'+ImgName).on('value', function(snapshot){
                    document.getElementById('myimg').src = snapshot.val().Link;
                });
            }```

HTML code:
```        <style> img{ height: 200px; width: 200px; border: 2px solid black;}</style>

    Image Name <input id = "namebox" type="text"><br><br>

    <img id ="myimg"> <label id = "UpProgress"></label><br><br>

    <button id = "select">Select Image</button>

    <button id = "upload">Upload Image</button>

    <button id = "retrieve">Retrieve Image</button>```

Answer 1

我找到了答案，我只需移动其中一个}；在上传函数中，它起了作用