ElementUI如何實現上傳Base64編碼后的圖片

這篇文章主要介紹了ElementUI如何實現上傳Base64編碼后的圖片的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇ElementUI如何實現上傳Base64編碼后的圖片文章都會有所收獲，下面我們一起來看看吧。

ElementUI上傳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)
      });
    },

關于“ElementUI如何實現上傳Base64編碼后的圖片”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“ElementUI如何實現上傳Base64編碼后的圖片”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。