js的input标签上传图片并转为base64预览

js的input标签上传图片并转为base64预览

背景

input标签获取到的文件是属于file类型的，而前端如果想预览要上传的图片，就需要将file类型转为base64字符串

解决办法

<input type="file" accept="image/*" @change="beforeUpload"><img :src="previewUrl" />beforeUpload(file) {const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {console.log('请上传JPG或者PNG格式的图片');return false;}const isLt5M = file.size / 1024 / 1024 < 5;if (!isLt5M) {console.log('图片大小限制5M');return false;}let reader = new FileReader();reader.readAsDataURL(file);reader.onload = (e) => {// 图片base64化const base64Str = e.target.result; // 转化后的base64字符串this.previewUrl = base64Str; // 预览图片的src路径,赋值为base64字符串};this.fileData = file;}