从 FileReader 获取 Base64 字符串时遇到问题

Question

我正在尝试通过 FileReader 从文件输入字段的文件列表传递文件，并获取 Base64 字符串以通过 axios 传递到服务器。 FileReader 的 onload 函数似乎获取了字符串，但显然在返回之前就丢失了字符串。因此，当我尝试将其附加到表单数据时，该值是未定义的。

我被告知这是一个异步函数，但我不确定在哪里等待承诺。有人可以告诉我我在这里做错了什么吗？

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

        const formData = new FormData()

        // FILE READER -- DOES NOT WORK
        const getImageFile = () => {
            return new Promise(resolve => {
                const reader = new FileReader()
                reader.onload = function () {
                    const imageFile = reader.result
                    // console.log(`IMAGE FILE:\n ${imageFile}`) // imageFile IS NOT UNDEFINED HERE, BASE64 STRING
                }
                reader.readAsDataURL(document.getElementById("image").files[0])
            })
        }
        ////////////////////////////////
        const imageFile = await getImageFile()
        
        Array.from(document.getElementById("form").elements).forEach(element => {           
            switch (element.name){
                case "image":
                    formData.append(`${element.name}`, imageFile) // UNDEFINED. WHY?
                    break
                case "submit":
                    break
                default:
                    formData.append(`${element.name}`, element.value)
            }
        })

        console.log([...formData])

        try {
            const response = axios.post('http://localhost:4000/uploadShow', formData)
            console.log(response)
        } catch (e) {
            console.log(e)
        }
    }

Answer 1

你必须自己创造承诺

const getImageFile = () => {
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = function () {
      resolve(reader.result)
    }
    reader.readAsDataURL(document.getElementById("image").files[0])
  })
}

const handleSubmit = async (e) => {
// ...
  const imageFile = await getImageFile()
// ...