Vue + Element UI 实现上传图片转base64及base64图片预览

功能概述

1. 前端后台管理系统新增数据时，需要在上传图片后，将图片转成base64格式的字符串，最后将字符串传到后台数据库。
2. 在编辑数据或者查看详情时，需要预览图片。

实现步骤

1. 使用el-upload组件实现上传功能
2. 通过getFile方法获取文件信息
3. 定义getBase64方法将图片转为base64格式
4. 预览和删除
5. 编辑数据时，实现图片预览

使用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>

参数说明：

1. list-type采用picture样式
2. action一定要有，用来触发上传操作，此处设为空，不上传到任何地方
3. accept设定可上传的文件格式
4. limit限定只能上传一个文件
5. auto-upload一定要设为false
6. file-list用来将图片显示到上传预览中
7. on-change获取已上传文件的信息
8. on-preview实现图片预览
9. on-remove删除图片并进行后续操作
10. 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]
    }
  })
},

参数说明：

1. 通过file.raw获取文件信息
2. 自定义getBase64方法，把图片内容转为base64格式
3. 因后台在接收数据时需要删除"data:image/jpeg;base64"字符串，此处用逗号进行了分隔，将后续数据通过变量proofImage传给后台

定义getBase64方法将图片转为base64格式

// 获取图片转base64
getBase64(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)
    }
  })
    },

参数说明：

1. 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);
}

参数说明：

1. 拼接base64格式数据，push到el-upload组件的fileList数组中，实现图片预览

效果截图

参考链接

elementui把上传的图片转为base64

element 上传图片转base64