Vue combined with ElementUI to upload Base64 encoded image examples

ElementUI uploads Base64 encoded pictures

I think ElementUI is still a very good component for writing on mobile phones, so when I was doing a small project, I used the Upload component of ElementUI to upload images. However, uploading images by ElementUI components is easier to implement images in the form of File files, but this time I need to convert the images into base64 encoding to upload images.

Install ElementUI

npm i element-ui -S

Introduce it on demand (of course, you can also introduce it all if you need it)

import { Upload } from 'element-ui'
import 'element-ui/lib/theme-chalk/'
(Upload);

Upload and implement

<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>

&lt;script&gt;
import {Toast} from "mint-ui";
export default {
   data() {
      return {
       actionUrl:'',
       imageUrl:'', //Upload the picture      };
    },
    methods: {
     getBase64(file){  //Convert the picture to base64 encoding         return new Promise(function(resolve,reject){
             let reader=new FileReader();
             let imgResult="";
             (file);
             =function(){
                 imgResult=;
             };
             =function(error){
                 reject(error);
             };
             =function(){
                 resolve(imgResult);
             }
         })
     },
     getFile(file,fileList){  //Upload avatar       this.getBase64().then(res=&gt;{
           this.$('home/ImgUpload',{"img":res}).then(result=&gt;{
               if(===200){
                   =;
               }else{
                   Toast('Image upload failed');
               }
           })
       })
     }
    }
}
&lt;/script&gt;

<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 converts uploaded images to Base64

Use the component, and then bind a method to obtain file information on-change. Set auto-upload to false.

 &lt;el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false"&gt;
            &lt;el-button size="small" type="primary"&gt;Select image upload,Upload up to one image&lt;/el-button&gt;
          &lt;/el-upload&gt;

Define the methods method. When uploading the file, the bound function will be triggered, and the content of the file will be bound to the function parameters. This way, you can get the content of the file.

  getFile(file, fileList) {
     ()
    },

Then customize a method to convert the image content to base64 format, imgResult is the content in base64 format. To convert to base64 string, you need to call the FileReader API in the h5 feature, but this API cannot be returned, so use promise to encapsulate it.

 getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        (file);
         = function() {
          imgResult = ;
        };
         = function(error) {
          reject(error);
        };
         = function() {
          resolve(imgResult);
        };
      });
    },

Finally call it

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

The above is personal experience. I hope you can give you a reference and I hope you can support me more.