Blob转base64

最新推荐文章于 2025-02-24 13:29:14 发布

原创最新推荐文章于 2025-02-24 13:29:14 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#base64 #blob

学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何将Element UI上传组件获取到的Blob对象转换为Base64格式，提供了两种实现方式，包括使用 FileReader 和 Promise封装。适合前端开发者处理文件上传中的编码问题。

Blob转base64

在element上传模块中获取的blob对象

//blob对象示例
{
	lastModified: 1618466309050
	name: "XXX.jpg"
	size: 11313
	type: "image/jpeg"
	uid: 1618471177
}

对其转化为base64格式

toBase64(blob){
   var reader = new window.FileReader();
      reader.readAsDataURL(blob); 
      reader.onloadend = () => {
        let base64data = reader.result;
        console.log(base64data);
      }
}

使用promise进行封装

toBase64(blob){
  return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error('文件流异常'));
        };
      });
}