blob对象转换为blob(url)的问题

这两天踩了一个坑与大家分享,同时记录自己的错误,由于公司业务的需求,需要把本地图片上传给后台,可是问题来了我的ajax发送了过去但是报了错,我问后台同事,他说我发送过去的东西源文件为空,问了后台才知道我不能直接发我本地获取的base64过去,要转成blob对象
function dataURItoBlob(base64Data) {
var byteString;
if(base64Data.split(’,’)[0].indexOf(‘base64’) >= 0)
byteString = atob(base64Data.split(’,’)[1]);
else
byteString = unescape(base64Data.split(’,’)[1]);
var mimeString = base64Data.split(’,’)[0].split(’:’)[1].split(’;’)[0];
var ia = new Uint8Array(byteString.length);
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
上面这个函数是封装好的,把文件或者base64传进去就能出来一个blob对象(说白了二进制文件)
然后转成了blob对象后就能成功发送了,问题又来了后台给我返回了新的base64编码(后台处理完成后的图片base64)我要把这个base64转成blob开头的blob链接,于是我就一次又一次的使用如下方法
window.URL = window.URL || window.webkitURL;
var url = window.URL.createObjectURL(‘这里是我传入的base64’);
但是我的控制台报了个错:Uncaught TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided
天呐我实在是想不通为什么要报错,这个时候很无助,问同事也无果,就索性自己来解决。
然后就这样困扰了一天,直到我在一个前端论坛看到了这句话:‘当我传递给createObjectURL原始数据时,我遇到了同样的错误:window.URL.createObjectURL(data)它必须是Blob,File或MediaSource对象,而不是数据本身。’原来我把base64传进去是错误的做法,正确的做法是我应该把后台返回的base64,再调用一次上面封装好的函数把base64转成blob对象在传入这里:
window.URL = window.URL || window.webkitURL;
var url = window.URL.createObjectURL(‘必须是Blob,File或MediaSource对象’);
这样就能得到下面这样的链接了:blob:http://xxx.x.x.x:xxxx/ba6468f9-4f06-4683-98f0-31e7ead2815e
这链接能干什么不用我多说了吧!
踩坑之路,说的不好的地方望指正。

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Blob图片链接下载是指通过Blob对象URL来下载图片。Blob(Binary Large Object)是一种二进制数据类型,可以用来存储大量的二进制数据,包括图片、音频、视频等。 要进行Blob图片链接下载,可以按照以下步骤进行操作: 1. 创建一个XMLHttpRequest对象或者使用fetch API来发送HTTP请求。 2. 使用GET方法请求服务器上的图片资源,并设置responseType为"blob",以获取二进制数据。 3. 在请求成功后,将返回的Blob对象转换URL,可以使用URL.createObjectURL(blob)方法。 4. 创建一个a标签,并设置其href属性为Blob URL。 5. 设置a标签的download属性为图片的文件名,以便用户下载时保存为指定的文件名。 6. 将a标签添加到文档中,并模拟点击a标签来触发下载。 以下是一个示例代码: ```javascript function downloadImage(url, filename) { // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = function() { if (xhr.status === 200) { // 获取Blob对象 var blob = xhr.response; // 创建Blob URL var blobUrl = URL.createObjectURL(blob); // 创建a标签并设置属性 var a = document.createElement('a'); a.href = blobUrl; a.download = filename; // 添加a标签到文档中并模拟点击 document.body.appendChild(a); a.click(); // 清理Blob URL URL.revokeObjectURL(blobUrl); // 移除a标签 document.body.removeChild(a); } }; xhr.send(); } // 使用示例 var imageUrl = 'https://example.com/image.jpg'; var fileName = 'image.jpg'; downloadImage(imageUrl, fileName); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值