element ui上传图片后端 elementui上传图片预览

转载

智能创新梦想家 2024-05-11 16:29:39

文章标签 element ui上传图片后端 vue element ui 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一定要设为false
file-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格式

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

参数说明：

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

参数说明：