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编码后的图片”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。