Vue結合ElementUI上傳Base64編碼後的圖片範例

2022-04-08 19:00:36

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字串要呼叫h5特性中的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)
      });
    },

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。