当前位置：首页 > news >正文

uni-app 将 base64 图片编码转为 Blob 本地文件路径

news 2025/11/15 6:17:46

1. uni-app 将 base64 图片编码转为 Blob 本地文件路径

uni-app 将 base64 图片编码转为 Blob 本地文件路径（把base64类型的图片，转换成blob二进制文件流）适用于 uni-app / vue.js / JavaScript。

1.1. 实现方式

base64转图片格式（js）
您可以使用 JavaScript 中的 atob() 和 btoa() 函数来实现 Base64 转图片的操作。
首先，使用 atob() 函数将 Base64 编码的字符串转换为二进制数据。然后，将二进制数据转换为 Blob 对象，并创建一个 URL 对象。最后，将 URL 对象分配给图像的 src 属性即可显示图片。

// 假设您已经有一个 Base64 编码的字符串
const base64String = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."// 将 Base64 编码的字符串转换为二进制数据
const binaryString = atob(base64String.split(',')[1])// 将二进制数据转换为 Blob 对象
const blob = new Blob([binaryString], { type: 'image/png' })// 创建 URL 对象并将其分配给图像的 src 属性
const image = new Image()
image.src = URL.createObjectURL(blob)// 将图像添加到文档中
document.body.appendChild(image)

请注意，您需要将 base64String 中的 data:image/png;base64, 删除，以便 atob() 函数正确解码该字符串。
如果您需要将 Base64 编码的字符串转换为文件并将其保存在本地文件系统中，请使用文件系统 API，如 FileWriter 或 FileSystem API。

1.2. base64转图片格式（uniapp）

在Uniapp中，可以使用uni.base64ToArrayBuffer() API将base64字符串转换为ArrayBuffer格式，然后将其转换为Blob对象。接着可以使用URL.createObjectURL()方法创建Blob URL，最终将其显示在页面上。

// 将base64字符串转换为ArrayBuffer格式
const arrayBuffer = uni.base64ToArrayBuffer(base64Str);// 将ArrayBuffer转换为Blob对象
const blob = new Blob([arrayBuffer], { type: 'image/png' });// 创建Blob URL
const imgUrl = URL.createObjectURL(blob);// 在页面上显示图片
this.imgUrl = imgUrl;

这里的base64Str是你要转换的base64字符串，type可以根据实际情况进行修改。最终的imgUrl就是生成的Blob URL，可以将其绑定到img标签的src属性上显示图片。

1.3. base64转图片格式（微信自带方法）

//把base64转换成图片
getBase64ImageUrl(base64Url) {/// 获取到base64Datavar base64Data = base64Url;/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求const base64ImgUrl = "data:image/png;base64," + base64Data;/// 得到的base64ImgUrl直接给图片:src使用即可return base64ImgUrl;
},

1.4. 示例

 //文件上传修改=2=async handleFileUri(fileByte, fileName) {let that = this;console.log("上传文件返回fileName:", fileName)console.log("上传文件返回fileByte:", fileByte)let str = "data:" + that.getFileType(fileName) + ";base64," + fileByteconsole.log("上传文件返回=str=" + str);let blob = that.parseBlob(str)const result = await uploadFile(blob);that.form.videoList.push(result.data);that.videoList.push({attachId: result.data.attachId,domain: result.data.domain,link: result.data.link,name: result.data.originalName,originalName: result.data.originalName,});},getFileType(fileName) {let name = ''switch (fileName) {case  ".txt":name = 'text/plain'breakcase ".cpp":name = 'text/x-c++src'breakcase ".c":name = 'text/x-csrc'breakcase ".h" :name = 'text/x-chdr'breakcase ".java":name = 'text/x-java'breakcase ".xhtml":name = 'application/xhtml+xml'breakcase ".xml":name = 'text/xml'breakcase ".html":name = 'text/html'breakcase ".jpg":name = 'image/jpeg'breakcase ".png":name = 'image/png'breakcase ".gif":name = 'image/gif'breakcase ".webp":name = 'image/webp'breakcase ".bmp":name = 'image/bmp'breakcase ".svg":name = 'image/svg+xml'breakcase  ".m4a":name = 'audio/mp4a-latm'breakcase ".aac":name = 'audio/aac'breakcase ".mp3":name = 'audio/mpeg'breakcase ".ogg":name = 'audio/ogg'breakcase ".wav":name = 'audio/x-wav'breakcase ".mp4":name = 'video/mp4'breakcase ".mkv":name = 'video/x-matroska'breakcase ".ts":name = 'video/mp2ts'breakcase ".pdf":name = 'application/pdf'breakcase ".doc":name = 'application/msword'breakcase ".docx":name = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'breakcase ".xls":name = 'application/vnd.ms-excel'breakcase ".xlsx":name = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'breakcase ".ppt":name = 'application/vnd.ms-powerpoint'breakcase ".pptx":name = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'breakcase  ".csv":name = 'text/comma-separated-values'break}return name},/*** base64 → blob* @description 传入即可,返回blob本地文件路径* @param {String} base64 - base64图片编码* @return String*/parseBlob(base64) {var arr = base64.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);for (var i = 0; i < n; i++) {u8arr[i] = bstr.charCodeAt(i);}var url = URL || webkitURL;return url.createObjectURL(new Blob([u8arr], {type: mime}));},