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編碼后的圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。