Encapsulate the method of converting a picture file object to Base64

frequently-used UI Component libraries such as Ant Design 、 Element UI There will be Upload Components , Support change Other events , But the event returns a file object , If you need a local live preview , It needs to be converted into Base64 Format .

You can encapsulate a method , Convenient for later use .

@/utils/getBase64.js

/**
 * Create by Deshun
 * E-mail: [email protected]/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */
 * Date: 2021-05-27  Afternoon  8:07:12
 */

//  File object transfer base64
export default function getBase64 (obj) {
  const image = obj; // Get the selected picture in the file field 
  let reader = new FileReader(); // Instantiate the file to read the object 
  reader.readAsDataURL(image); // Read file as  DataURL, That is to say base64 code 
  reader.onload = function (ev) { // Triggered when the file read completes successfully 
    let dataURL = ev.target.result; // After the file is read successfully DataURL, That is to say base64 code 
    return dataURL
  }
}

Introduce... On the required page ：

page.vue

<script>
//  Reference method 
import getBase64 from '@/utils/getBase64'
export default {
  data() {
    return {
      ...
    }
  },
  methods: {
    //  Image file object transfer Base64
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      })
    },
    //  Upload & Select Picture 
    handleChange(file) {
      //  Read & Processing images 
      this.getBase64(file).then(res => {
        let img = new Image()
        img.src = res
        img.onload = function () {
          ...
        }
      })
    }
  }
}
</script>

No reprint without permission ：w3h5 » Encapsulate a picture file object to Base64 Methods