Javascript 当我尝试从webapp将链接传递到firebase时，一个用于视频，另一个用于图像，它只获取视频链接，而不获取图像链接

我正在尝试创建一个web应用程序管理面板，用于在Firebase中存储视频播放应用程序的数据，所以我想在Firebase中上载图像和视频

我正在将视频和图像保存到一个类别中，并在该类别下创建了另一个节点以显示图像和视频

    <h2>Video Thumbnail Preview Section</h2>

<hr />

<div class="row">

    <div class="col-lg-3">

        <h4>Add new categories </h4>

        <form id="video-thumbnail-form">

            <div class="form-group">
                <label for="category-thumbnail-video-preview">Select Category</label>
                <select id="category-thumbnail-video-preview" class="form-control">

                </select>

            </div>

            <div class="form-group">
                <label for="category-video-preview-title">Title</label>
                <input type="text" class="form-control" id="category-video-preview-title" />
                
                <div class="invalid-feedback">
                    Please enter title for video thumbnail
                </div>

            <div class="form-group">
                <label for="category-video-preview-desc">Description</label>
                <input type="text" class="form-control" id="category-video-preview-desc" />
                
                <div class="invalid-feedback">
                    Please enter some short description for category
                </div>
            </div>

            <div class="form-group">
                <label for="category-video-preview-faculty">Faculty</label>
                <input type="text" class="form-control" id="category-video-preview-faculty"/>
                
                <div class="invalid-feedback">
                    Please enter Faculty Name
                </div>
            
            </div>

            <div class="form-group">
                <label for="category-video-preview-language">Language</label>
                <input type="text" class="form-control" id="category-video-preview-language"/>
                
                <div class="invalid-feedback">
                    Please enter course language
                </div>
            
            </div>
            
            <div class="form-group">
                <label for="category-video-preview-price">Price</label>
                <input type="number" class="form-control" id="category-video-preview-price" />
                
                <div class="invalid-feedback">
                    Please enter Price
                </div>
                
            </div>

            <div class="form-group">
                <label for="category-video-preview-thumbnail">Video Preview Use MP4</label>
                <input type="file" class="form-control" id="category-video-preview-thumbnail" />
                <div class="invalid-feedback">
                    Please choose a valid MP4 video
                </div>
            </div>

            <div class="form-group">
                <label for="category-video-preview-image">Video Preview Image</label>
                <input type="file" class="form-control" id="category-video-preview-image"/>
                <div class="invalid-feedback">
                    Please choose a valid Image for Video thumbnail
                </div>
            </div>


            <div class="form-group">
                <video id="selected-video-preview" width="250" height="150" src="#" />
            </div>

            <div class="form-group">
                <img id="selected-video-thumbnail-image" width="250" height="150" src="#"/>
            </div>


            <div class="form-group">
                <div class="progress">
                    <div class="progress-bar" id="video-preview-upload-progress" style="width:0%">0%</div>
                </div>
            </div>
            <div class="from-group">
                <button id="save-video-preview" type="button" class="btn btn-primary">Save</button>
            </div>
        </form>
        <div id="result">

        </div>
    </div>

    <!-- <div class="col-lg-9">
        <h4>Saved Categories</h4>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Faculty</th>
                    <th>Language</th>
                    <th>Price</th>
                    <th>Video Preview</th>
                </tr>
            </thead>
            <tbody id="videopreview">
                
            </tbody>

            
        </table>
    </div> -->

</div>

<script>

    // To hide the video and image preview 

$("#selected-video-preview").hide();
$("#selected-video-thumbnail-image").hide();

    // To preview the selected video

    function previewVideoPreview(videopreview){
            if(videopreview.files && videopreview.files[0]){
                var reader = new FileReader(); 

                reader.onload = function(e){
                    $("#selected-video-preview").attr('src', e.target.result);
                    $("#selected-video-preview").fadeIn();
                    
                }
                reader.readAsDataURL(videopreview.files[0]);
            }
        }
        $("#category-video-preview-thumbnail").change(function(){
            previewVideoPreview(this);
        });


    // To Preview the thumbnail of video 
    function previewImageVideoPreview(imagevideopreview){
            if(imagevideopreview.files && imagevideopreview.files[0]){
                var imageread = new FileReader();

                imageread.onload = function(e){
                    $("#selected-video-thumbnail-image").attr('src', e.target.result);
                    $("#selected-video-thumbnail-image").fadeIn();
            
                }
                imageread.readAsDataURL(imagevideopreview.files[0])
            }
        }
        $("#category-video-preview-image").change(function(){
            previewImageVideoPreview(this);
        });



        // valid video and image type
        var validVideoTypes = ["video/mp4", "video/3gp"]
        var validVideoTHumbnailImageType = ["image/gif", "image/jpeg", "image/png"]


    


        // For video preview 

        var dbCategories = firebase.database().ref("categories");

        dbCategories.once("value").then(function(categories){
            categories.forEach(function(videopreviewcategory){
                $("#category-thumbnail-video-preview").append("<option value='"+videopreviewcategory.key+"'>"+videopreviewcategory.key+"</option>");     
            });
        });

        
        


        $("#save-video-preview").click(function(){
            $("#category-video-preview-title").removeClass("is-invalid");
            $("#category-video-preview-desc").removeClass("is-invalid");
            $("#category-video-preview-faculty").removeClass("is-invalid");
            $("#category-video-preview-language").removeClass("is-invalid");
            $("category-video-preview-price").removeClass("is-invalid");
            $("#category-video-preview-thumbnail").removeClass("is-invalid");
            $("#category-video-preview-image").removeClass("is-invalid");

            var titlevideopreview = $("#category-video-preview-title").val();
            var descvideopreview = $("#category-video-preview-desc").val();
            var facultyvideopreview = $("#category-video-preview-faculty").val();
            var languagevideopreview = $("#category-video-preview-language").val();
            var pricevideopreview = $("#category-video-preview-price").val();
            var videothumbnail = $("#category-video-preview-thumbnail").prop("files")[0];
            var videothumbnailimage = $("#category-video-preview-image").prop("files")[0];


            if(!titlevideopreview){
                $("#category-video-preview-title").addClass("is-invalid");
                return; 
            }

            if(!descvideopreview){
                $("#category-video-preview-desc").addClass("is-invalid");
                return; 
            }

            if(!facultyvideopreview){
                $("#category-video-preview-faculty").addClass("is-invalid");
                return; 
            }

            if(!languagevideopreview){
                $("#category-video-preview-language").addClass("is-invalid");
                return; 
            }

            if(!pricevideopreview){
                $("#category-video-preview-price").addClass("is-invalid");
                return; 
            }


            if(!videothumbnail){
                $("#category-video-preview-thumbnail").addClass("is-invalid");
                return; 
            }

            if($.inArray(videothumbnail["type"], validVideoTypes)<0){
                $("#category-video-preview-thumbnail").addClass("is-invalid");
                return; 
            }

            if(!videothumbnailimage){
                $("#category-video-preview-image").addClass("is-invalid");
                return;
            }
            if($.inArray(videothumbnailimage["type"], validVideoTHumbnailImageType)<0){
                $("#category-video-preview-image").addClass("is-invalid");
                return;
            }

        
            
            var videopreviewcategory = $("#category-thumbnail-video-preview").val(); 
            var name = videothumbnail["name"];

            var ext = name.substring(name.lastIndexOf("."), name.length);

            var videothumbnailname = new Date().getTime(); 
            
            // Create a root reference
            var storageRef = firebase.storage().ref(videopreviewcategory + "/" + videothumbnailname + ext);
            var uploadTask = storageRef.put(videothumbnail);

            // for the thumbnail image 
            
            // var videoname = videothumbnailimage["videoname"];
            // var extr = videoname.substring(videoname.lastIndexOf("."), videoname.length);
            // var videothumbnailimagename = new Date().getTime();
            // var storageVideoRef = firebase.storage().ref(videopreviewcategory + "/" + videothumbnailimagename + extr);
            // var uploadImageTask = storageVideoRef.put(videothumbnailimage)

            
            

            uploadTask.on("state_changed", 
                function progress(snapshot){
                    var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; 
                    $("#video-preview-upload-progress").html(Math.round(percentage)+"%");
                    $("#video-preview-upload-progress").attr("style", "width: "+percentage + "%");
                }, 

                function error(err){

                },

                function complete(){

                    uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL){
                        var database = firebase.database().ref("videothumbnail").child(videopreviewcategory);

                        var videoid = database.push().key;


                
                    uploadTask.snapshot.ref.getDownloadURL().then(function(videothumbnailimageURL){
                    
                        var videodatabase = firebase.database().ref("videothumbnailimage").child(videopreviewcategory);
                        var videoid = database.push().key;
                    

                

                

                    

                    

                        var video = {
                            "url": downloadURL, 
                            "title": titlevideopreview, 
                            "desc": descvideopreview,
                            "faculty": facultyvideopreview, 
                            "language": languagevideopreview,
                            "price": pricevideopreview,
                            "videopreviewimage": videothumbnailimageURL
                        };

                        database.child(videoid).set(video, function(err){
                            alert("Video thumbnail saved..");
                            resetForm();
                        });
                    
                    });
                    
                    });
                     
                }
            );

        });
        
    function resetForm(){
    $("#video-thumbnail-form")[0].reset(); 
    $("#selected-video-preview").fadeOut();
    $("#selected-video-thumbnail-image").fadeOut();
    $("#video-preview-upload-progress").html("Completed");
    }
</script>

视频缩略图预览部分

添加新类别
选择类别
标题
请输入视频缩略图的标题
描述
请为类别输入一些简短说明
官能
请输入教员姓名
语言
请输入课程语言
价格
请输入价格
视频预览使用MP4
请选择有效的MP4视频
视频预览图像
请为视频缩略图选择有效的图像
0%
拯救
//隐藏视频和图像预览的步骤
$（“#所选视频预览”）.hide（）；
$（“#所选视频缩略图”）.hide（）；
//预览所选视频的步骤
功能预览视频预览（视频预览）{
if（videopreview.files&&videopreview.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#所选视频预览”）.attr（'src'，e.target.result）；
$（“#所选视频预览”）.fadeIn（）；
}
reader.readAsDataURL（videopreview.files[0]）；
}
}
$（“#类别视频预览缩略图”）.change（函数（）{
预览视频预览（本）；
});
//预览视频缩略图的步骤
函数预览图像视频预览（图像视频预览）{
if（imagevideopreview.files&&imagevideopreview.files[0]）{
var imageread=new FileReader（）；
imageread.onload=函数（e）{
$（“#所选视频缩略图图像”）.attr（'src'，e.target.result）；
$（“#所选视频缩略图”）.fadeIn（）；
}
imageread.readAsDataURL（imagevideopreview.files[0]）
}
}
$（“#类别视频预览图像”）.change（函数（）{
预览视频预览（本）；
});
//有效的视频和图像类型
var validVideoTypes=[“视频/mp4”、“视频/3gp”]
var validVideoTHumbnailImageType=[“image/gif”、“image/jpeg”、“image/png”]
//用于视频预览
var dbCategories=firebase.database（）.ref（“类别”）；
dbCategories.one（“值”）。然后（函数（类别）{
类别.forEach（函数（videopreviewcategory）{
$（“#类别缩略图视频预览”）.append（“+videopreviewcategory.key+”）；
});
});
$（“#保存视频预览”）。单击（函数（）{
$（“#类别视频预览标题”）.removeClass（“无效”）；
$（“#类别视频预览说明”）.removeClass（“无效”）；
$（“#类别视频预览”）.removeClass（“无效”）；
$（“#类别视频预览语言”）.removeClass（“无效”）；
$（“类别视频预览价格”）。removeClass（“无效”）；
$（“#类别视频预览缩略图”）.removeClass（“无效”）；
$（“#类别视频预览图像”）.removeClass（“无效”）；
var titlevideopreview=$（“#类别视频预览标题”）.val（）；
var descvideopreview=$（“#类别视频预览desc”）.val（）；
var facultyvideopreview=$（“#类别视频预览教师”）.val（）；
var languagevideopreview=$（“#类别视频预览语言”）.val（）；
var pricevideopreview=$（“#类别视频预览价格”）.val（）；
var video缩略图=$（“#类别视频预览缩略图”）.prop（“文件”）[0]；
var videothumbnailimage=$（“#类别视频预览图像”）.prop（“文件”）[0]；
如果（！titlevideopreview）{
$（“#类别视频预览标题”）.addClass（“无效”）；
返回；
}
如果（！视频预览）{
$（“#类别视频预览说明”）.addClass（“无效”）；
返回；
}
如果（！facultyvideopreview）{
$（“#类别视频预览”）.addClass（“无效”）；
返回；
}
if（！languagevideopreview）{
$（“#类别视频预览语言”）.addClass（“无效”）；
返回；
}
如果（！价格视频预览）{
$（“#类别视频预览价格”）.addClass（“无效”）；
返回；
}
如果（！v