Image field to base64

up: Vue, Nuxt Snippets

Script

const previewSrc = ref('')
const getFileDataURL = (file: File) =>
  new Promise((resolve, reject) => {
    const fr = new FileReader()
    fr.onload = () => resolve(fr.result)
    fr.onerror = reject
    fr.readAsDataURL(file)
  })
 
const onFileFieldChange = async (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = target.files
  if (!files?.length) {
    return
  }
  const first = files[0]
  if (!first) {
    return
  }
  if (!first.type.startsWith('image/')) {
    console.warn('File type no supported')
    // only images are supported
    return
  }
  const encodedImageUrl = (await getFileDataURL(first)) as string
  previewSrc.value = encodedImageUrl
}

Template

label Add image
  input(type="file" name="image" accept="image/*" @change="onFileFieldChange")
NuxtImg(:src="previewSrc" v-if="previewSrc")