在这个示例中,我们创建了一个Vue组件,其中包含一个按钮用于触发Blob的获取和转换。当按钮被点击时,会发起一个Axios请求来获取Blob对象,并通过blobToBase64方法将其转换为Base64编码的字符串。转换完成后,Base64字符串会被存储在组件的data属性中,并在模板中显示。
Blob转Base64函数 blobToBase64(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('blobToBase64 error')); }...
2. 将base64流数据转成pdf文件可打印 这次后端返参不是oss那边传回来的,而是传给我一串base64编码的字符串,让我去生成可打印的pdf,返参如下所示。 2.1 base编码转为pdf方法 atob() 方法可用于解码base-64 编码的字符串,再通过Blob将Uint8Array数组转换成pdf类型的文件对象 ...
注意:今天在使用Vue进行文件上传的代码编写时,发现报错:Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."` 显然,是传入的file对象出了问题,根据报错提示,我们应该传入一个Blob对象。也就是说,file不是Blob对象 我们使用console.log...
//Base64 转blob 和file function base64ToBlob (base64,filename){ const parts = base64.split(';base64,') const bytecharacters=atob(parts[1]) const contentType =parts[0].split(':')[1] const byteNumbers = new Array(bytecharacters.length) ...
Vue Blob流与Java后端的接收方案 在现代Web应用中,前端框架如Vue.js与后端服务常常需要进行复杂的数据交互。本文将探讨如何通过Blob流在Vue与Java后端之间传输文件,具体包括Blob的生成、转化为Base64编码并发送到后端,以及Java后端的接收与处理逻辑。 1. 背景 ...
数据传输:在客户端与服务器之间的AJAX请求中,有时需要传输二进制文件,可以使用Base64编码后进行传输。 三、Vue中实现Base64编码 Vue项目通常运行在浏览器中,因此可以直接使用JavaScript的btoa()(针对二进制数据)和atob()(用于解码)函数,但这两个函数只支持处理字符串。对于文件(如图片),需要先读取为Blob或ArrayBuffer...
Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'." ` 显然,是传入的file对象出了问题,根据报错提示,我们应该传入一个Blob对象。也就是说,file不是Blob对象 我们使用console.log(file)进行调试输出: ...
imageSrc.startsWith('blob:')) { URL.revokeObjectURL(this.imageSrc); } } 总结 在Vue中展示Base64格式的图片,虽然便捷但需要注意性能问题。通过直接绑定、样式调整、以及合理处理大图片的策略,我们可以优雅地在Vue项目中展示Base64图片,同时保持良好的用户体验和页面性能。希望本文的分享能够帮助到你,在Vue开发...
7、到第 2 步var img = this.getObjectURL(this.imgs[i]),此时,获取到的 img 为blob:http:xxxxxxxx格式的图片,用image.onload转成base64图片,发送后端,但是,这里的this,指向的是这个function()函数,不是全局,且image.onload = function(),其本身无法携带任何参数,所以,需要改成es6的箭头函数image.onload =...