前端添加讲师上传控件

 

 

 

一、前端整合图片上传组件

1、复制头像上传组件

从vue-element-admin复制组件：

vue-element-admin/src/components/ImageCropper

vue-element-admin/src/components/PanThumb

2、前端参考实现

src/views/components-demo/avatarUpload.vue

3、前端添加文件上传组件

src/views/edu/teacher/add.vue

template：

 <!-- 讲师头像 -->
<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>

引入组件模块

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

4、js脚本实现上传和图片回显

 

export default {

  components: { ImageCropper, PanThumb },

data() {

  return {

    //其它数据模型

    ......,

      

    BASE_API: process.env.BASE_API, // 接口API地址

    imagecropperShow: false, // 是否显示上传组件

    imagecropperKey: 0 // 上传组件id

  }

  },

  

......,

  

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

    }
  }
}

 

5、测试文件上传

前后端联调