data vue 转base64_VUE Base64编码图片展示与转换图片

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，使用 base64 传输图片文件可以节省一个 http 请求，图片的 base64 编码可以算是前端优化的一环

VUE Base64编码图片展示

export default {

data() {

icon: 'data:image/png;base64,,XXXXX...',

}

}

Base64编码转换图片

base64ImgtoFile(dataurl, filename = 'file') {

let arr = dataurl.split(',')

let mime = arr[0].match(/:(.*?);/)[1]

let suffix = mime.split('/')[1]

let bstr = atob(arr[1])

let n = bstr.length

let u8arr = new Uint8Array(n)

while (n--) {

u8arr[n] = bstr.charCodeAt(n)

}

return new File([u8arr], `${filename}.${suffix}`, {

type: mime

})

}，

// base64编码的图片

var base64Img = 'data:image/png;base64,XXXXX...';

//转换图片文件

var imgFile = this.base64ImgtoFile(base64Img);

文件转换base64编码

class="avatar-uploader"

action=""

ref="uploadAvatar"

:show-file-list="false"

:auto-upload="false"

:on-change="changeFile">

data() {

return {

imageUrl: '',

imageBaseUrl: '',

}

}

/**

* 文件框改变事件

* @param file

* @param fileList

*/

changeFile(file, fileList) {

const isJPGORPNG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png');

const isLt1M = file.size / 1024 / 1024 < 1;

if (!isJPGORPNG) {

this.$message.info('上传头像图片只能是 JPG 或 PNG 格式!');

return;

}

if (!isLt1M) {

this.$message.info('上传头像图片大小不能超过 1MB!');

return;

}

var This = this;

var reader = new FileReader();

reader.readAsDataURL(file.raw);

reader.onload = function(e){

this.result; //base64编码

This.imageBaseUrl = this.result;

This.imageUrl = this.result;

}

},

更便捷的图片转化Base64编码方式

利用 Chrome 浏览器，在 chrome 下新建一个窗口，然后把要转化的图片直接拖入浏览器，打开控制台，点 Source，如下图所示，点击图片，右侧就会显示该图片的 base64 编码