封装一个图片文件对象转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的方法

推荐阅读:

Ueditor后端配置项没有正常加载,上传插件不能正常使用!的解决过程。

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

QQ聊天插件,鼠标划入划出显示隐藏效果。

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

使用 swiper 轮播插件遇到的问题及解决方法

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)