file upload from dataUrl with axios

upload.js

// Note: only for modern browser
import axios from 'axios'

// helper function: generate a new file from base64 String
const dataURLtoFile = (dataurl, filename) => {
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n) {
    u8arr[n - 1] = bstr.charCodeAt(n - 1)
    n -= 1 // to make eslint happy
  }
  return new File([u8arr], filename, { type: mime })
}

// generate file from base64 string
const file = dataURLtoFile('data:image/png;base64,iVBORw0KGgoAAAANSUhEU...')
// put file into form data
const data = new FormData()
data.append('img', file, file.name)

// now upload
const config = {
  headers: { 'Content-Type': 'multipart/form-data' }
}
axios.post('/path/to/upload', data, config).then(response => {
  console.log(response.data)
})

Hi guys,

I try to use this dataURLtoFile function, but the final file is corrupted.
In my research, I find a solution:

getExportFile () {
    // helper function: generate a new file from base64 String
    const base64ToBlob = (dataurl) => {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1]
      const sliceSize = 1024;
      const byteChars = window.atob(arr[1]);
      const byteArrays = [];

      for (let offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        let slice = byteChars.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
      }

      return new Blob(byteArrays, {type: mime});
    }

    const getFilename = (dataUrl) => {
      const arr = dataUrl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];

      return Math.round(+new Date()/1000) + '.' + mime.split('/').pop();
    }

    const dataUrl = this.previewCanvas.toDataURL();
    const blob = base64ToBlob(dataUrl);
    blob.name = getFilename(dataUrl);

    // generate file from base64 string
    return blob;
  }

consider using fetch: https://stackoverflow.com/a/36183085

There is problem at line number 12
u8arr[n] = bstr.charCodeAt(n)

It must be
u8arr[n-1] = bstr.charCodeAt(n-1)

thanks fixed!

I have the error "TypeError: Cannot read properties of null (reading '1')" in this line const mime = arr[0].match(/:(.*?);/)[1] . Do you know why?

@Bryan03122 check your base64 image data,it should has a “,” in it

This solution is heaven-sent ! Thank you very much !

THANK YOU!!!!!!!!!! <3