zoukankan      html  css  js  c++  java
  • 在线教育项目-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
      
        },
     
  • 相关阅读:
    windows server2012 r2 上IIS8.5
    windows server2012 r2 上 安装 IIS8.5
    Visual Studio 14 初试,vNext
    ASP.NET MVC+EF5 开发常用代码
    JavaScript中的Array
    java maven安装以及如何安装第三方的jar以及module的配置
    java字符串格式化错误
    Excel数据生成Sql语句
    tornado异步请求非阻塞
    python tornado User-Agent
  • 原文地址:https://www.cnblogs.com/dmzna/p/12810864.html
Copyright © 2011-2022 走看看