27.添加讲师--头像上传

一、下载并添加上传组件  

下载地址：https://wws.lanzous.com/iKAypn3bkna   密码:e82t

将下载好的上传组件加入到前端的组件目录下

 

 二、使用上传组件

1、在save.vue页面添加更换头像

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

      </el-form-item>

2、定义变量和初始值

      //①定义变量和初始值
      imagecropperShow:false,//上传弹框组件是否显示
      imagecropperKey:0,//上传组件key值
      BASE_API:process.env.BASE_API,//获取dev.env.js里面地址

      saveBtnDisabled:false  //保存按钮是否禁用

3、引入组件和声明组件

import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
  components: { ImageCropper, PanThumb },

4、修改上传接口地址

 

 5、编写上传成功和关闭上传弹框的方法

//②两个方法
    close() { //关闭上传弹框的方法
      this.imagecropperShow = false
      //上传组件初始化
      this.imagecropperKey = this.imagecropperKey + 1
    },
    cropSuccess(data) { //上传成功的方法
      this.imagecropperShow = false
      this.teacher.avatar = data.url
      this.imagecropperKey = this.imagecropperKey + 1
    }