前端添加讲师上传控件

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

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>
    
   <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、测试文件上传

前后端联调  
谷粒学院学习记录

相关

标签