vue-element-admin上传头像组件复用

官方说了推荐大家使用官方版本,因为他也是整合别人的
官方地址

引入组件

在\src\components下找到ImageCropper, PanThumb 这两个文件夹,拷到自己的项目里,

写代码

直接看着官方的案例改
找到\src\views\components-demo\avatar-upload.vue

所有的内容都要拷到你的代码里,位置看着放.
重点在image-cropper这个组件,更多的属性可以看官方地址

<template>
  <div class="components-container">
    <pan-thumb :image="image" />
    <el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
      Change Avatar
    </el-button>
    <!--
    更多解释看官方
      v-show=判断是否显示
      :key=类似于id,如果一个页面多个图片上传控件,可以做区分
      :width=组件宽
      :height=组件高
      url=上传头像的后台地址
      lang-type=语言支持
      field=对应的后台参数名称
      @close="close"关闭的回调
      @crop-upload-success=上传成功的回调
    -->
    <image-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="300"
      :height="300"
      url="http://localhost:9001/eduoss/file/uploadAvatar"
      lang-type="zh"
      field="file"
      @close="close"
      @crop-upload-success="cropSuccess"
    />
  </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  name: 'AvatarUploadDemo',
  components: { ImageCropper, PanThumb },
  data() {
    return {
      imagecropperShow: false, // 上传弹框组件是否显示
      imagecropperKey: 0, // 上传组件key值,用来初始化组件
      image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'//默认绑定的图片
    }
  },
  methods: {
    // 上传成功回调
    cropSuccess(resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.image = resData.files.avatar
    },
    //关闭上传框
    close() {
      this.imagecropperShow = false
    }
  }
}
</script>

<style scoped>
  .avatar{
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
</style>

相关推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫,分享到朋友圈

vue-element-admin上传头像组件复用
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close