vue如何实现将图像文件转换为base64(base64,vue,开发技术)

将图像文件转换为base64

直入主题，上代码（其实用的还是FileReader）

1、image转Base64

imageToBase64(file){varreader=newFileReader()reader.readAsDataURL(file)reader.onload=()=>{console.log('file转base64结果：'+reader.result)this.iconBase64=reader.result}reader.onerror=function(error){console.log('Error:',error)}}

2、Base64图像直接显示在标签

<el-form-itemprop="iconBase64"><img:src="iconBase64"v-show="isShow"/></el-form-item>

vue网络图片转base64

单张图片转Base64

<script>methods:{ //异步执行 imageUrlToBase64(){ //一定要设置为let，不然图片不显示 letimage=newImage(); //解决跨域问题 image.setAttribute('crossOrigin','anonymous'); letimageUrl="http://img1.imgtn.bdimg.com/it/u=4012470373,3540768040&fm=26&gp=0.jpg"; image.src=imageUrl letthat=this; //image.onload为异步加载 image.onload=()=>{ varcanvas=document.createElement("canvas"); canvas.width=image.width; canvas.height=image.height; varcontext=canvas.getContext('2d'); context.drawImage(image,0,0,image.width,image.height); varquality=0.8; //这里的dataurl就是base64类型 vardataURL=canvas.toDataURL("image/jpeg",quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！ } }, }</script>

多张图片转Base64

<script>data(){return{ base64Datas:[],} methods:{ imageUrlToBase64(){ letdata=[ "https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/png/szxw315c4ia.png", "https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/png/szxw315c4ia.png", "https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/png/szxw315c4ia.png" ] this.imageUrlToBase64(data,1,data.length); }, //采用递归同步执行 onloadImg(data,i,len){ //一定要设置为let，不然图片不显示 letimage=newImage(); //解决跨域问题 image.setAttribute('crossOrigin','anonymous'); letimageUrl="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/png/szxw315c4ia.png"; image.src=imageUrl letthat=this; //image.onload为异步加载 image.onload=()=>{ varcanvas=document.createElement("canvas"); canvas.width=image.width; canvas.height=image.height; varcontext=canvas.getContext('2d'); context.drawImage(image,0,0,image.width,image.height); varquality=0.8; //这里的dataurl就是base64类型 vardataURL=canvas.toDataURL("image/jpeg",quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！ //数组存放图片base64 that.base64Datas.push(dataURL); //递归执行图片url转base64 i=i+1; if(i<=len){ that.onloadImg(data1,i,len) } } }, }</script>