在线教育项目-day05【上传头像实现】

1.添加组件

 2. 再添加讲师页面使用该组件

<!-- 讲师头像 -->
<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+'/admin/oss/file/upload'"
                   field="file"
                   @close="close"
                   @crop-upload-success="cropSuccess"/>

</el-form-item>

引入模块

import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

定义一些值

 引入一个声明

 定义方法

更改地址

close(){

      this.imagecropperShow = false

      //上传组件初始化

      this.imagecropperKey = this.imagecropperKey+1

    },

    cropSuccess(data){

      console.log(data)

      this.imagecropperShow = false

      this.teacher.avatar = data.url

      //上传组件初始化

      this.imagecropperKey = this.imagecropperKey+1

  

    },