Day06-讲师头像上传前端-p93

使用element-ui组件实现

1、将头像上传前端组件源码复制到项目中

组件：

组件链接：https://pan.baidu.com/s/13I8rJkGF_bt7w_f3kwPZkQ
提取码：6wx8

将组件放到项目src/components下：

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

2.1、前端表单代码

 <!-- 讲师头像 -->
      <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.2、引入组件模块

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

  export default {
    components: { ImageCropper, PanThumb },
    data() {
      return {
        teacher: {
          name:'',
          sort:0,
          level:1,
          carrer:'',
          intro:'',
          avatar:''
        },

3、使用组件

*data()定义变量和初始值

		imagecropperShow:false,//上传弹框是否默认显示
        imagecropperKey:0,//上传罪案key值
        BASE_API:process.env.BASE_API,//获取dev.env.js里面的值
        saveBtnDisabled:false// 保存按钮是否禁用,

4、修改上传接口地址

后端路径

5、编写close方法和上传成功的方法

close(){//关闭上传弹窗的方法
        this.imagecropperShow=false
      },
      //上传成功方法
      cropSuccess(data){
        this.imagecropperShow=false
        //上传之后接口返回图片地址
        this.teacher.avatar = data.url
      },

6、测试

阿里云oss上传成功:

数据成功保存到数据库:

7、小bug

当上传了头像，提交数据之前，想要换头像是换不成的，这是需要修改代码：

//上传组件初始化
this.imagecropperKey = this.imagecropperKey+1