Vue怎么结合ElementUI上传Base64编码后的图片

今天小编给大家分享一下Vue怎么结合ElementUI上传Base64编码后的图片的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

ElementUI上传Base64编码后的图片

自我认为ElementUI还是一个很不错的写手机端的组件，所以这次做小项目的时候就用了ElementUI的Upload组件来实现图片的上传，不过ElementUI组件的上传图片更易于实现图片以File文件的形式实现，但是这次我需要把图片转换为base64编码来实现图片的上传。

安装ElementUI

npm i element-ui -S

按需引入(当然如果需要你也可以全部引入)

import { Upload } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Upload);

上传实现 

<template>     <div>        <el-upload           class="avatar-uploader"           :action="actionUrl"           :show-file-list="false"           :on-change="getFile">           <img v-if="imageUrl" ref="phoUrl" :src="imageUrl" class="avatar">           <i v-else class="el-icon-plus avatar-uploader-icon"></i>         </el-upload>     </div> </template>

<script> import {Toast} from "mint-ui"; export default {    data() {       return {        actionUrl:'',        imageUrl:'', //上传图片       };     },     methods: {      getBase64(file){  //把图片转成base64编码          return new Promise(function(resolve,reject){              let 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);              }          })      },      getFile(file,fileList){  //上传头像        this.getBase64(file.raw).then(res=>{            this.$http.post('home/ImgUpload',{"img":res}).then(result=>{                if(result.body.status===200){                    this.imageUrl=result.body.data;                }else{                    Toast('图片上传失败');                }            })        })      }     } } </script>

<style>   .avatar-uploader .el-upload {     border: 1px dashed #d9d9d9;     border-radius: 6px;     cursor: pointer;     position: relative;     overflow: hidden;     width:101px;     height:101px;   }   .avatar-uploader .el-upload:hover {     border-color: #409EFF;   }   .avatar-uploader .el-upload .el-upload__input{       display: none;   }   .avatar-uploader-icon {     font-size: 28px;     color: #8c939d;     width: 100px;     height: 100px;     line-height: 100px;     text-align: center;   }   .avatar {     width: 100px;     height: 100px;     display: block;   } </style>

ElementUI把上传的图片转为Base64

使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可 

 <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false">             <el-button size="small" type="primary">选择图片上传,最多上传一张图片</el-button>           </el-upload>

定义methods方法,当上传文件就会触发绑定的函数，然后文件的内容就会绑定到函数的参数里面，这样用file.raw就可以获取文件的内容了。

  getFile(file, fileList) {      console.log(file.raw)     },

然后自定义一个方法，用来把图片内容转为base64格式，imgResult就是base64格式的内容了。转为base64字符串要调用h6特性中的FileReader这个api,但是这个api不能return，所以用promise封装一下。

 getBase64(file) {       return new Promise(function(resolve, reject) {         let 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);         };       });     },

最后调用一下

 getFile(file, fileList) {           this.getBase64(file.raw).then(res => {       console.log(res)       });     },

以上就是“Vue怎么结合ElementUI上传Base64编码后的图片”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。