本文主要是介绍el-upload 读取图片为Base64位数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
el-upload 读取图片为Base64位数据
- 前端HTML
- JS代码
小编由于框架限制不能直接将图片上传到服务器，所有小编只能研究将图片转为base64位，虽然网上有很多的例子，但是最后还都是失败了，下面的代码是小编研究的结果，并且可以正常实现此功能，希望对后面的人有帮助。
前端HTML
<el-uploadclass="avatar-uploader"ref="upload"action="#":show-file-list="false":before-upload="beforeUpload":on-success="handleChange":on-change="onChange":auto-upload="false":data="addList"><i class="el-icon-plus avatar-uploader-icon"></i></el-upload>
JS代码
beforeUpload(){const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;},onChange(file,fileList){var _this = this;var event = event || window.event;var file = event.target.files[0];var reader = new FileReader();//转base64reader.onload = function(e) {_this.imageUrl = e.target.result //将图片路径赋值给src_this.guideImage =e.target.result //将图片路径赋值给src}reader.readAsDataURL(file);},handleChange(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},
这篇关于el-upload 读取图片为Base64位数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
