FileReader获取Base64字符串后返回undefined的异步问题求助

你的核心问题是**getImageFile函数里的Promise没有调用resolve**，导致await getImageFile()永远拿不到返回值，最终imageFile是undefined。

错误细节 #

在reader.onload回调里，你已经成功获取到Base64字符串，但没有把这个值传递给Promise的resolve方法——这会让Promise一直处于pending状态，await自然无法得到有效结果。

修复后的完整代码 #

const handleSubmit = async (e) => {
    e.preventDefault()

    const formData = new FormData()

    // 修复后的FileReader逻辑
    const getImageFile = () => {
        return new Promise((resolve, reject) => {
            const fileInput = document.getElementById("image")
            // 先判断是否有文件，避免无文件时报错
            if (!fileInput.files || fileInput.files.length === 0) {
                reject(new Error("未选择文件"))
                return
            }
            const reader = new FileReader()
            reader.onload = function () {
                // 拿到Base64后调用resolve传递结果
                resolve(reader.result)
            }
            // 处理文件读取失败的情况
            reader.onerror = function () {
                reject(reader.error)
            }
            reader.readAsDataURL(fileInput.files[0])
        })
    }

    try {
        const imageFile = await getImageFile()
        
        Array.from(document.getElementById("form").elements).forEach(element => {           
            switch (element.name){
                case "image":
                    formData.append(element.name, imageFile)
                    break
                case "submit":
                    break
                default:
                    formData.append(element.name, element.value)
            }
        })

        console.log([...formData])

        // axios.post需加await，否则拿到的是Promise对象而非响应数据
        const response = await axios.post('http://localhost:4000/uploadShow', formData)
        console.log(response)
    } catch (e) {
        console.error("提交失败:", e)
    }
}

额外优化点 #

1. 增加文件存在性判断，避免用户未选文件时执行readAsDataURL报错；
2. 给Promise补充reject逻辑，处理文件读取失败的场景，统一用外层try/catch捕获错误；
3. 给axios.post添加await，确保拿到实际响应数据而非Promise对象。

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