目录 功能概述实现步骤使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和删除编辑数据时，实现图片预览 效果截图参考链接
功能概述 前端后台管理系统新增数据时，需要在上传图片后，将图片转成base64格式的字符串，最后将字符串传到后台数据库。在编辑数据或者查看详情时，需要预览图片。 实现步骤 使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和删除编辑数据时，实现图片预览 使用el-upload组件实现上传功能 <el-upload list-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;快三单双大小三期必中(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