需求，封装封装Element-ui的upload组件实现图片和文件的上传

vue+element能够满足大部分的前端UI开发，今天的我们就以Element-ui的upload组件实现图片和文件的上传;

上传前

上传后

注意

仅支持png和jpg的上传，上传后的图片返回Base64和图片File

<template>

         <div style="display: flex;align-items: center">

                 <span style="margin-right: 10px">图片上传</span>

                 <ZhbImgFile

                         type="appIconUrl"

                         :imgUrl="appIconUrlTrue"

                         ref="upfile"

                         @func="getImgBase64"></ZhbImgFile>

             </div>

    </template>

    <script>

      export default {

        data() {

          return {

            appIconUrlTrue:''

          };

        },

        methods: {

            //获取图片

                  getImgBase64(data) {

                      console.log(data);

                  },

        

        },

      };

    </script>

返回图片信息

{type:this.type,base64:this.imgBase64,imgFile:this.file}

备注：更多使用组件请查看zhb-ui文档

https://zhbnyx.github.io/zhb-docs/