在Vue中将Blob对象转换为Base64编码的字符串,可以通过FileReader对象来实现。以下是一个详细的步骤和代码示例: 获取Blob对象:通常通过HTTP请求(如Axios或Fetch)从服务器获取Blob数据。 使用FileReader读取Blob对象:通过FileReader对象的readAsDataURL方法将Blob对象读取为Data URL。 提取Base64编码的字符串:从Data URL中提取...
注意:今天在使用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...
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)进行调试输出: 看,raw这个属性写了个大大的Fi...
base64string:'', newblob:null, } }, created() { this.filename =localstorage.getItem('myfilename ') this.base64string =localstorage.getItem('myBlobKey') }, methods: { handlesubmit(){ if(this.base64string){ //从Base64转换 Blob this.newblob =base64ToBlob(this.base64string,this.filena...
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')); }...
Vue Blob流与Java后端的接收方案 在现代Web应用中,前端框架如Vue.js与后端服务常常需要进行复杂的数据交互。本文将探讨如何通过Blob流在Vue与Java后端之间传输文件,具体包括Blob的生成、转化为Base64编码并发送到后端,以及Java后端的接收与处理逻辑。 1. 背景 ...
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)进行调试输出: ...
数据传输:在客户端与服务器之间的AJAX请求中,有时需要传输二进制文件,可以使用Base64编码后进行传输。 三、Vue中实现Base64编码 Vue项目通常运行在浏览器中,因此可以直接使用JavaScript的btoa()(针对二进制数据)和atob()(用于解码)函数,但这两个函数只支持处理字符串。对于文件(如图片),需要先读取为Blob或ArrayBuffer...
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 =...