vue、原生js中，图片转base64通用简洁方法
中利用原生js实现图片base64转码。
·
不多废话 直接上代码，如果有兴趣继续阅读，请先看示例。
<body>
<input type="file" id="iptFile" />
</body>
<script>
iptImg = document.getElementById("iptFile");
iptImg.onchange = function () {
var imgMsg = document.getElementById("iptFile").files[0]; //获取传入的图片信息
var render = new FileReader(); //实例化FileReader
render.readAsDataURL(imgMsg ); //转化base64
// console.log(render.result); 此时访问不到result，得到的结果是null
render.onload = function () {
console.log(render.result); //转化结果
};
};
</script>前言
本篇博客仅现定于图片转码，不考虑上传文件的情景，如有需求，可以自行添加类型判断。关于类型判断，下文会有介绍。
获取上传的图片的内容
<input type='file' /> ，相信了解h5的朋友们都知道它的用法——上传图片和文件。和其它input标签不同，它的内容比较特殊，不是字符串或者数字，而是文件/图片。获取内容的方式也不再是value了，而是通过 .files的方法获取，示例上的 [0] 表示第一项。具体方法看代码示例。
console.log打印imgMsg的内容，如下：
其中包含的有许多信息，包括名字，大小，类型，时间等。但是它不只是信息，可以理解为，它就是图片本身。如果要做图片和文件的区分，可以依靠此属性中的 type判断。
Js内置函数 FileReader()
FileReader() 是一个构造函数 需要用new创建实例，否则报错
这个构造函数就是今天的主角，转换base64，就靠他完成。具体内容不多阐述，有兴趣的朋友可以去MDN
自行了解。
readAsDataURL()
它包含一些内置项，其中有一个方法readAsDataURL()。可用于处理上传的图片。
该方法必须传参，否则报错
这时我们就把imgMsg作为参数传递进去。然后再打印 render，注意其中的result，此时已经有了数据，不再是null
但是，直接访问 render.result 是访问不到结果的，得到的是null
我们需要换种方式，绕一下路。
render.onload = function () {
console.log(render.result); //转化结果
};打印如下
至此，恭喜，你已经成功将图片转换为base64！
内容很简单，我写的原生js，如果要在vue中使用，在methods中定义一个方法，id改为ref就行，其他按需改变。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)