结合vue.js实现input file图片转成base64并获取图片高度和宽度

首先在file input组件上定义一个change方法 表示上传文件就会触发该方法

<input type="file" @change="fileChange($event)">

并且将发生的事件传进去

此时获取到上传事件的fileChange的方法就要写转base64的方法

转base64需要使用到html提供的对象

fileChange(e){
let img=e.srcElement.files[0]; //获取到上传文件的对象
var reader = new FileReader();
reader.readAsDataURL(img);//参数为上传的文件对象 传值进去就会触发以下onload方法
reader.onload = function (e) {
                    // e.target.result为转换成的base64编码
                    var Img=new Image();  //定义一个图片对象
                    Img.src=e.target.result; //当src被赋值 则触发以下方法
                    Img.onload=function (){
                        console.log(Img.width);  //就可以获取到图片的宽度和高度
                        console.log(Img.height);
                    }

         }
}

文章主要的方法都在这 至于其他上传到服务器啥的 就不多说了

java文件服务器可以参考我另一个关于minio文章