记录一个vue将读取图片并转成base64位的功能
今天特别郁闷,找了老半天搜到的代码不是少了代码,就是运行炸裂的,烦心的很。
// 页面代码
<input type="file" @change="ClickGetImg">
// 公共代码
ClickGet(e) {
var image = new Image();
image.src = window.URL.createObjectURL(e.target.files[0]);
image.onload = () => {
var base64Img = this.getBase64Img(image); //这个输出出来后就是base64位的字符串了
//这里可以写你的文件上传请求
};
},
getBase64Img(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
},
// vue调用
ClickGetImg(e){
this.$utils.ClickGet(e); //这里调用封装的方法
}
如果不知道如何封装的小伙伴可以看这里: 记录一个Vue封装公共函数方法的步骤.