vue实现头像图片上传效果

其中注意的是需要引入两个组件：

vue页面的写法；

<template>
    <div>
        <!-- 讲师头像：TODO -->
        <!-- 讲师头像 -->
        <el-form-item label="讲师头像">
            <!-- 头衔缩略图 -->
            <pan-thumb :image="teacher.avatar"/>

            <!-- 文件上传按钮 -->
            <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
            </el-button>
            <!--
        v-show：是否显示上传组件
        :key：类似于id，如果一个页面多个图片上传控件，可以做区分
        :url：后台上传的url地址
        @close：关闭上传组件
        @crop-upload-success：上传成功后的回调 -->
        <image-cropper
                        v-show="imagecropperShow"
                        :width="300"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/ossservice/file/uploadFile'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>
        </el-form-item>
    </div>
</template>
<script>

// 引入头像上传组件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
    components: { ImageCropper, PanThumb }, // 加载components 的组件
    data(){
        return {
            teacher:{
                avatar:''
            },
            saveBtnDisabled : false,
            
            // 上传头像需要的参数-0·    
            imagecropperShow:false, // 是否显示上传组件
            imagecropperKey:0,  // 上传组件id ，要变化
            BASE_API:process.env.BASE_API,  // 接口API地址
        }
    },
    created(){
        
    },
    methods:{
        // 上传成功后的回调函数
        cropSuccess(data) {
            console.log(data)
            this.imagecropperShow = false
            this.teacher.avatar = data.url
            // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
            this.imagecropperKey = this.imagecropperKey + 1
        },
        // 关闭上传组件
        close() {
            this.imagecropperShow = false
            // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
            this.imagecropperKey = this.imagecropperKey + 1
        }
    }
}
</script>

效果展示

列表中展示图片代码

      <el-table-column
        header-align="center"
        align="center"
        label="品牌logo">
        <template slot-scope="scope">
          <img :src="scope.row.logo" width="100px" height="100px"></img>
        </template>
      </el-table-column>

效果展示