封装一个图片文件对象转Base64的方法

常用的 UI 组件库如 Ant Design 、 Element UI 等都会有的 Upload 组件，支持 change 等事件，但是事件返回的是文件对象，如果需要本地实时预览，就需要转换成 Base64 格式。

可以封装一个方法，方便以后的使用。

@/utils/getBase64.js

/**
 * Create by Deshun
 * E-mail: contact@w3h5.com
 * Date: 2021-05-27 下午 8:07:12
 */

// 文件对象转base64
export default function getBase64 (obj) {
  const image = obj; //获取文件域中选中的图片
  let reader = new FileReader(); //实例化文件读取对象
  reader.readAsDataURL(image); //将文件读取为 DataURL,也就是base64编码
  reader.onload = function (ev) { //文件读取成功完成时触发
    let dataURL = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
    return dataURL
  }
}

在需要的页面引入：

page.vue

<script>
// 引用方法
import getBase64 from '@/utils/getBase64'
export default {
  data() {
    return {
      ...
    }
  },
  methods: {
    // 图片文件对象转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);
      })
    },
    // 上传&选择图片
    handleChange(file) {
      // 读取&处理图片
      this.getBase64(file).then(res => {
        let img = new Image()
        img.src = res
        img.onload = function () {
          ...
        }
      })
    }
  }
}
</script>

未经允许不得转载：Web前端开发资源网 » 封装一个图片文件对象转Base64的方法

推荐阅读：

判断网页是通过PC端还是移动终端打开的

利用CSS设置图片黑白/灰色效果，同时适用于整站变灰

找回Windows Server&Windows10 ltsb 图片查看器

PHP连接MySQL数据库报错：Call to undefined function mysql_connect()的解决方法

jQuery text() html() val()设置内容和attr()设置属性的用法