javascript - 在 Firebase 注册中上传图片

Question

我正在使用 Firebase.auth 在我的网站上注册用户。为了从他们那里获取更多信息，我还创建了一个 Firestore 文档来存储更多信息。这是我的代码:

HTML

<div class="col-md-6">
               <div class="row justify-content-center align-items-center h-md-100vh">
                  <div class="col-10 my-5 my-md-0">
                     <h2 class="h4 font-weight-bold">Signup To Become A Player</h2>
                     <form id="player-login-form">
                        <div class="form-group">
                           <input type="text" id="player-signup-firstname" name="player_signup[firstname]" required="required" placeholder="What&#039;s your firstname?" class="form-control">
                           <div class="invalid-feedback mt-0"></div>
                        </div>
                        <div class="form-group">
                           <input type="text" id="player-signup-lastname" name="player_signup[lastname]" required="required" placeholder="What&#039;s your lastname" class="form-control">
                           <div class="invalid-feedback mt-0"></div>
                        </div>
                        <div class="form-group">
                           <input type="email" id="player-login-email" name="player_signup[email]" required="required" placeholder="What&#039;s your email?" class="form-control">
                           <div class="invalid-feedback mt-0"></div>
                           <small id="emailHelp" class="form-text text-muted"></small>
                        </div>
                        <div class="form-group ">
                           <input type="password" id="player-login-password" name="player_signup[password]" required="required" placeholder="Set a password" class="form-control">
                           <div class="invalid-feedback mt-0"></div>
                        </div>
                        <div class="form-group ">
                        <input type="file" accept="image/*" capture="camera" id="cameraInput">
                        </div>
                        <button type="submit" class="btn btn-primary" id="player-signup-button">Create account</button>
                     </form>
                  </div>
               </div>
            </div>

还有JS

// The sign up variables and constants
    const signUpBtn = document.querySelector('#player-signup-button');

    // Sign up function 
    signUpBtn.addEventListener("click", (e) => {

        e.preventDefault(); // avoid the page to refresh when we click signup
        // get user info from the id of the input
        const loginForm = document.querySelector('#player-login-form');
        const firstname = loginForm['player-signup-firstname'].value;
        const lastname = loginForm['player-signup-lastname'].value;
        const email = loginForm['player-login-email'].value;
        const password = loginForm['player-login-password'].value;
        // Upload picture part
        var refname = 'photos/' + firstname + lastname;
        let storageRef = firebase.storage().ref(refname);
        let fileUpload = document.getElementById("cameraInput")
        fileUpload.addEventListener('change', function(evt) {
            console.log("Is code going here?");
            let firstFile = evt.target.files[0] // upload the first file only
            let uploadTask = storageRef.put(firstFile).then(function(fileSnapshot) {
                firebase.firestore().collection('players').add({
                    firstname: firstname,
                    lastname: lastname,
                    email: email,
                    profilepic: fileSnapshot.ref.getDownloadURL()
                });
            })
        });
        auth.createUserWithEmailAndPassword(email, password).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            M.toast({html:error.message});
        }).then( cred => {
            loginForm.reset();
        });

    });

**我的问题:** 我的图像上传部分有问题。看起来解释器无法读取 fileUpload.addEventListener 中的代码。

您知道问题出在哪里吗？

Answer 1

您需要将此回调注册放在点击处理程序之外:

document.getElementById("cameraInput").addEventListener('change', function(evt) {...});

现在你的代码说“用户提交表单后，开始监听他们浏览图片”，而你真正想要的是“当页面加载时，开始监听用户浏览图片。然后，当他们提交表单时，读取所选的图片文件并将其发送到服务器。”