使用Firebase Storage模拟器时图片无法正确上传问题排查

核心错误：上传对象错误 #

你在调用uploadBytesResumable时，传入的参数是DOM元素file，而非选中的文件对象selectedFile。file作为DOM元素被转换为字符串后长度极小，这就是为什么你得到9B的损坏文件。
修复：将上传代码中的file替换为selectedFile：

var uploadTask = uploadBytesResumable(storageRef, selectedFile, metadata);

条件判断逻辑问题 #

if (user, selectedFile)使用了逗号运算符，实际只会校验selectedFile是否存在，忽略了用户登录状态的判断。应该改为逻辑与校验，确保用户已登录且有选中文件才执行上传：

if (user && selectedFile) {

可选优化：避免硬编码文件类型 #

代码中强制设置contentType: 'image/png'，如果用户上传JPG等其他格式图片，会导致文件类型不匹配。建议使用文件本身的MIME类型：

const metadata = {
    contentType: selectedFile.type
};

可选优化：复用已获取的用户对象 #

已经通过onAuthStateChanged拿到了user变量，无需再调用auth.currentUser，直接使用user.uid即可，避免潜在的空值风险：

var storageRef = ref(storage, `users/${user.uid}/profileImage.png`);

修复后的完整代码 #

file.addEventListener('change', (e) => {
    const selectedFile = e.target.files[0];
    onAuthStateChanged(auth, (user) => {
        if (user && selectedFile) {
            const reader = new FileReader();

            reader.addEventListener('load', function () {
                img.setAttribute('src', reader.result);
            });

            reader.readAsDataURL(selectedFile);

            const metadata = {
                contentType: selectedFile.type
            };

            var storageRef = ref(storage, `users/${user.uid}/profileImage.png`);

            var uploadTask = uploadBytesResumable(storageRef, selectedFile, metadata);

            uploadTask.on(
                'state_changed',
                (snapshot) => {
                    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                    progressBar.style.width = `${progress}%`;
                    console.log('Upload is ' + progress + '% done');
                    switch (snapshot.state) {
                        case 'paused':
                            console.log('Upload is paused');
                            break;
                        case 'running':
                            console.log('Upload is running');
                            break;
                    }
                }, (error) => {
                    switch (error.code) {
                        case 'storage/unauthorized':
                            alert('User has no permission');
                            break;
                        case 'storage/canceled':
                            alert('Upload was cancelled');
                            break;
                        case 'storage/unknown':
                            alert(error);
                            break;
                    }
                }, () => {
                    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
                        console.log('File available at', downloadURL);
                        img.src = downloadURL;
                        updateProfile(user, { photoURL: downloadURL })
                            .then(() => console.log(user))
                            .catch((error) => console.log(error));
                    });
                    document.getElementById('submit_link').removeAttribute('disabled');
                });
        } else {
            console.log(`user doc could not be updated`);
        };
    });
});

内容的提问来源于stack exchange，提问作者HarryNC