在这个示例中,blobUrl是一个包含Blob对象URL的数据属性,它被绑定到<img>标签的src属性上,以便显示图片。mounted钩子用于在组件挂载时调用convertBase64ToBlob方法,并传入示例Base64数据。
在Vue中,你可以通过将base64字符串转换为Blob对象,然后使用Blob对象创建一个File对象。以下是一个简单的方法来实现这一转换: methods: { base64ToFile(base64Data, filename) {//将base64的数据部分提取出来const arr = base64Data.split(','); const mime= arr[0].match(/:(.*?);/)[1]; const bstr...
console.log(url)//产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串} } }) 其他文件格式转换: base64图片转成blob图片,一般base64图片链接比较长,使用链接跳转打开时不太友好,可能会解析错误,可以转成blob图片打开 //获取base64图片, url图片地址,//如果返回的图片地址不是base64格...
body.removeChild(link) }, // 将Base64文件转为 Blob buildBlobByByte: function (data) { const raw = window.atob(data) const rawLength = raw.length const uInt8Array = new Uint8Array(rawLength) for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i) } return ...
* 1.base64转为blob对象, * 2.blob对象转为file对象 */ baseToBlob(url) { var arr = url.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); ...
在上面的示例中，首先将base64字符串解码为二进制数据，然后将其包装在Blob对象中，设置其类型为'image/...
compressImage方法返回的是 blob 值,根据服务端接口需要可以改为返回 base64,只需将resolve(blob)改为resolve(base64)即可。 注意一点,对于有些宽高没到 500,且分辨率很小的图片,压缩之后可能比之前还大。猜测可能是 canvas 生成的图片分辨率要比原来高一些,所以最终的图片比压缩前更大。可以在调用的地方加个判断,...
}).then((res) => {//这边是后台返回了base64的格式,所以我要转为blob const blob = this.base64ToBlob(res.data); const elink = document.createElement("a"); // const fname = item.name + str + "_" + lists[1] + lists[2]; // 下载文件的名字 ...
imageSrc.startsWith('blob:')) { URL.revokeObjectURL(this.imageSrc); } } 总结 在Vue中展示Base64格式的图片,虽然便捷但需要注意性能问题。通过直接绑定、样式调整、以及合理处理大图片的策略,我们可以优雅地在Vue项目中展示Base64图片,同时保持良好的用户体验和页面性能。希望本文的分享能够帮助到你,在Vue开发...
}//调用let file =dataURLtoFile(base64Data, imgName);2.先将base64转换成blob,再将blob转换成file文件,此方法不存在浏览器不兼容问题。//将base64转换为blobconst dataURLtoBlob=(dataurl)=>{ let arr= dataurl.split(","); let mime= arr[0].match(/:(.*?);/)[1]; ...