目录
功能概述实现步骤使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和删除编辑数据时，实现图片预览 效果截图参考链接功能概述
前端后台管理系统新增数据时，需要在上传图片后，将图片转成base64格式的字符串，最后将字符串传到后台数据库。在编辑数据或者查看详情时，需要预览图片。实现步骤
使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和删除编辑数据时，实现图片预览使用el-upload组件实现上传功能
<el-uploadlist-type="picture"action=''accept=".jpg, .png":limit="1":auto-upload="false":file-list="fileList":on-change="getFile":on-preview="handlePictureCardPreview":on-remove="handleUploadRemove"><el-button size="small" type="primary">选择图片上传</el-button><div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件</div></el-upload><el-dialog :visible.sync="dialogVisible" append-to-body><img width="100%" :src="dialogImageUrl" alt /></el-dialog>
参数说明：
list-type采用picture样式action一定要有，用来触发上传操作，此处设为空，不上传到任何地方accept设定可上传的文件格式limit限定只能上传一个文件auto-upload一定要设为falsefile-list用来将图片显示到上传预览中on-change获取已上传文件的信息on-preview实现图片预览on-remove删除图片并进行后续操作el-dialog用来预览图片，append-to-body是为了将弹框插入到父级弹框的body中
通过getFile方法获取文件信息
getFile(file, fileList) {this.getBase64(file.raw).then(res => {const params = res.split(',')console.log(params, 'params')if (params.length > 0) {this.proofImage = params[1]}})},
参数说明：
通过file.raw获取文件信息自定义getBase64方法，把图片内容转为base64格式因后台在接收数据时需要删除"data:image/jpeg;base64"字符串，此处用逗号进行了分隔，将后续数据通过变量proofImage传给后台
定义getBase64方法将图片转为base64格式
// 获取图片转base64getBase64(file) {return new Promise(function (resolve, reject) {const reader = new FileReader()let imgResult = ''reader.readAsDataURL(file)reader.onload = function () {imgResult = reader.result}reader.onerror = function (error) {reject(error)}reader.onloadend = function () {resolve(imgResult)}})},
参数说明：
imgResult就是base64格式的内容了。转为base64字符串要调用h5特性中的FileReader这个api,但是这个api不能return，所以用promise封装一下。
预览和删除
handleUploadRemove(file, fileList) {this.proofImage = '';},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},
编辑数据时，实现图片预览
if (this.drawerStatus == 'edit') {this.fileList = []let obj = {name: '资质证明',url: 'data:image/jpeg;base64,' + this.proofImage}this.fileList.push(obj);}
参数说明：
拼接base64格式数据，push到el-upload组件的fileList数组中，实现图片预览
效果截图
参考链接
elementui把上传的图片转为base64
element 上传图片转base64
