js实现图片转换为Base64
2018-12-12 17:19:52

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。
常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据,包括MIME的电子邮件及XML的一些复杂数据。

上传图片

1
<input type="file" class="form-control" name="photo" placeholder="图片" @change="getFile($event)"/>

获取图片

1
2
3
4
// 获取图片并调用deal()将图片转换为Base64
getFile(event) {
this.deal(event.target.files[0])
},

转换成Base64

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
deal(photo) {
// 判断支不支持FileReader
if (!photo || !window.FileReader) {
alert('未选择图片或不支持上传图片!')
}
// 判断上传的文件是否是图片格式
if (/^image/.test(photo.type)) {
//创建一个reader
let reader = new FileReader();
//将图片转成base64格式
reader.readAsDataURL(photo);
reader.onload = function() {
base64_photo = reader.result; // base64_photo是转换好的结果
}
} else {
alert('请选择一张图片!');
}
},

注意事项

base64_photoreader.onload函数中,而reader.onload又在deal函数中,形成闭包,所以在外部无法访问到base64_photo,想在外部引用base64_photo就要另辟蹊径

在这里提供一个方法,可以将base64_photo定义为全局变量,这样就能在函数外部访问到

1
2
3
4
5
// 全局变量与局部变量
let base64_photo = ''; // 全局变量
function a() {
let base64_photo = ''; // 局部变量
}

The End😀