将Base64图片转为Blob文件流

最新推荐文章于 2025-02-15 11:28:09 发布
最新推荐文章于 2025-02-15 11:28:09 发布
阅读量5k 收藏 8
点赞数 1
分类专栏： js常用工具函数记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42326052/article/details/108662382
版权
项目中H5接收到Base64格式图片，需转换为Blob文件流上传。本文介绍处理带或不带前缀的Base64转换方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在项目中遇到h5调用app的方法返回base64格式的图片给h5，这时候我们通常都需要把其转化为文件流的格式再上传到后端服务器上。
base64的格式有时候会有前缀，有时会没有前缀，下面的方法可以进行统一处理

/**
   * 将以base64的图片url数据转换为Blob
   * 用url方式表示的base64图片数据
   */
    let base64 = {
   
              dataURL: res.localData,//用url方式表示的base64图片数据
              type: 'image/jpeg'//文件类型
            }
function convertBase64UrlToBlob (base64
最低0.47元/天 解锁文章
uni-app - 将 base64 图片编码转为 Blob 本地文件路径（把base64类型的图片，转换成blob二进制文件流）适用于 uni-app / vue.js / JavaScript
王二红
11-26 1万+
uni-app/vue.js/JavaScript将base64转Blob，uniappapp端如何将图片的base64编码转换成File对象或Blob，uni-app/vue.js/JavaScript中拿到base64转blob对象，uniapp图片base64格式转blob格式方法，uniapp上传图片压缩转base64码与base64转图片路径，Base64/Blob/File图片文件转换，url、base64、blob相互转换方法，读取本地文件为Base64并转成B
图片BASE64加密保存到数据库Blob类型中（放入数据库，并取出生成图片）
12-13
本示例主要涉及的是如何将图片通过BASE64编码加密后存入数据库的Blob类型字段，并能从数据库中取出这些数据再还原成原始图片。以下是相关知识点的详细说明： 1. **BASE64编码**：BASE64是一种用于将二进制数据转换...
将以base64的图片url数据转换为Blob
weixin_42304966的博客
06-07 632
将以base64的图片url数据转换为Blob
base64图片转blob对象
m0_50873766的博客
05-17 400
如果是接口上传需要，上传二进制文件流，可以创建ForData()对象来转成二进制。
图片base64转为blob,file格式
lxy123456qqq的博客
01-31 443
图片base64转为blob,file格式
base64转Blob方法
only_的博客
09-02 1万+
base64ToBlob(urlData, type) { let arr = urlData.split(','); let mime = arr[0].match(/:(.*?);/)[1] || type; // 去掉url的头，并转化为byte let bytes = window.atob(arr[1]); // 处理异常,将ascii码小于0的转换为大于0 let ab =...
js实现把图片的绝对路径转为base64字符串、blob对象再上传
01-19
JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传。 用处： 从本地选择图片上传，如项目规定只能选择本项目文件夹下的图像上传为头像等。 主要思想： 使用canvas.toDataURL()方法将...
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
11-26
为了解决这个问题，我们可以将Base64编码的图片转换为Blob对象，并将其放入FormData对象中，然后通过AJAX提交。以下是如何实现这一过程的详细步骤： ### 第一步：Base64转Blob Base64编码的图片数据中包含了图片的...
base64格式的图片转换为blob格式的文件流
weixin_55582221的博客
10-09 1457
今天写项目的时候发现需要把截图生成后的base64格式的图片转换为blod格式的，就找到了这个方法，进行记录一下。使用的话就直接调用就可以了。
将base64格式的图片转成文件流格式传给后台
webCandy的博客
01-20 1765
代码片. // An highlighted block // 将base64的图片路径转为文件流 base64toFile (dataurl, filename = 'file') { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let suffix = mime.split('/')[1] let bstr = atob(arr[1])
PB PowerBuilder base64 blob 互转
05-27
里面代码例子都验证过的，可以直接使用，如果需要全部代码，请直接打开https://item.taobao.com/item.htm?id=570336396094 网址咨询
图片格式转换（File、Blob、base64）
热门推荐
XUELINGMM的博客
02-16 1万+
记录一下比较常见的图片格式（File、Blob、base64）在不同的场景他们之间的相互转换的方法。BlobBLOB(binary large object)： 二进制大对象,是一个可以存储二进制文件的容器。在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。属性名称读/写描述size只读Blob 对象中所包含数据的大小（字节）。type只读一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。例如 “image/png”File。
一张base64图片格式的图片，将其转化成blob然后上传到服务器
ta_huang的博客
03-28 1568
一张base64图片格式的图片，将其转化成blob然后上传到服务器需求描述实现总结 需求描述 一张base64图片格式的图片，将其转化成blob然后上传到服务器，后台跟接收表单文件上传一样的方式去处理改图片 实现 // url 表示base64的字符串， name表示文件名，附加到blob上的那么、上 uploadFile(url, name) { // 以逗号划分类型和内容 let arr = url.split(',') // 截取类型
JS 图片base64与file_blob的相互转换
不谷的博客
02-15 1142
在开发中，经常会遇到需要将base64编码的图片转换为file文件格式用于上传的情况；使用：引入xxx.js文件，调用方法。
JS将 base64 转为 Blob 对象
yunfeather的博客
01-02 2022
【代码】JS将 base64 转为 Blob 对象。
base64和Blob互相转换
weixin_30776863的博客
09-02 1346
1.base64转blob(二进制数据) /** * 将以base64的图片url数据转换为Blob * @param urlData 用url方式表示的base64图片数据 */ function convertBase64UrlToBlob(urlData){ var arr = urlData.split(','), mime = arr[0...
Base64转Blob对象、网络图片转Base64、转Blob(url)的方法
qq_30995621的博客
10-05 1740
Base64转Blob对象、网络图片转Base64、转Blob(url)的方法
Javascript常用方法 -- 将base64的图片url数据转换为Blob、file
QiuMenglin_的博客
07-19 4744
/** * 将以base64的图片url数据转换为Blob * @param urlData图片base64数据 * @name convertBase64UrlToBlob */ function convertBase64UrlToBlob(urlData) { var bytes = window.atob(urlData.split(',')[1]); //...
base64、blob格式相互转换及应用
龘
09-02 4587
1.Base64 to Blob function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), //分割为数组，分割到第一个逗号 let mime = arr[0].match(/:(.*?);/)[1],//获取分割后的base64前缀中的类型 let bstr = window.atob(arr[1]), let n = bstr.length, let u8arr = new Uint8Arr
vue3中将base64 转为blob
最新发布
03-19
### Vue3 中 Base64 转换为 Blob 对象的方法 在 Vue3 项目中，可以利用 JavaScript 的原生方法来实现将 Base64 编码转换为 Blob 对象的功能。以下是具体的实现方式： #### 方法描述 通过解析 Base64 字符串并将其解码为二进制数据，再创建一个新的 `Uint8Array` 数组存储这些字节数据。最后，基于该数组构建一个 `Blob` 对象。 ```javascript export function base64ToBlob(base64String, mimeType = 'application/octet-stream') { const byteCharacters = atob(base64String.split(',')[1]); // 解码 Base64 数据部分 const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); // 将字符转为对应的 ASCII 值 } const byteArray = new Uint8Array(byteNumbers); // 创建 Uint8Array 存储字节数组 return new Blob([byteArray], { type: mimeType }); // 返回新的 Blob 对象[^1] } ``` 此函数接受两个参数： - **base64String**: 包含 MIME 类型前缀的完整 Base64 字符串。 - **mimeType**: 可选，默认值为 `'application/octet-stream'`，用于指定目标文件的内容类型。 #### 使用示例 假设有一个图片的 Base64 字符串如下所示： ```text data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA... ``` 可以通过调用上述方法将其转换为 Blob 对象： ```javascript const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...'; const blob = base64ToBlob(base64Image); // 验证 Blob 是否成功创建 console.log(blob instanceof Blob); // 输出 true ``` 如果需要进一步操作（例如上传到服务器），可以直接使用这个 Blob 对象作为表单数据的一部分。 --- ### 关于 Vue 文件上传中的常见错误处理 当尝试上传文件时，可能会遇到类似于以下错误消息的情况：“Failed to convert property value of type ‘java.lang.String’ to required type ‘org.springframework.web.multipart.MultipartFile[]’”。这通常是因为前端传递的数据未被正确识别为多部件形式（MultipartFormData）。为了规避此类问题，在发送请求之前应确保已将 Blob 正确封装至 FormData 实例中[^2]。 下面是一个完整的例子演示如何结合 Axios 库完成这一过程： ```javascript import axios from 'axios'; function uploadFile(blobData) { const formData = new FormData(); formData.append('file', blobData, 'example.png'); // 添加 Blob 到 FormData 并命名文件名为 example.png axios.post('/upload-endpoint', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }) .then(response => console.log('Upload successful:', response)) .catch(error => console.error('Error during upload:', error)); } // 示例调用 const myBlob = base64ToBlob(base64Image, 'image/png'); uploadFile(myBlob); ``` 以上代码片段展示了如何先将 Base64 转化成 Blob 后再执行上传动作的过程。 --- ### 展示动态字典标签功能 对于某些场景下可能还需要配合后端返回的结果实时更新界面显示内容的需求，则可参考如下做法——借助 `<dict-tag>` 组件绑定选项列表与当前记录的状态字段共同作用达成目的[^3]: ```html <el-table-column label="状态" align="center"> <template #default="scope"> <dict-tag :options="statusOptions" :value="scope.row.status"/> </template> </el-table-column> ``` 其中 `statusOptions` 是预先加载好的键值映射关系集合；而每一行内的实际数值则由 `scope.row.status` 提供。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值