组件路径

src\components\Common\upload.vue

效果

使用方法

<template>
 <common-upload class="fake-image" @uploadImgUrl="getUploadImgUrl"></common-upload>
 <span>（建议尺寸300*200，大小不超过1MB）</span>
</template>

<script>
 import CommonUpload from '../../../Common/upload.vue'
 export default {
  data() {
   return {
    imgUrl: ''
   }
  },
  methods: {
   getUploadImgUrl(msg) {
     this.imgUrl = msg
     console.log(this.formInline.img)
   }
  }
</script>
<style>
.fake-image .avatar-uploader, .fake-image .avatar-uploader .el-upload-list__item{
    position: relative;
    width: 300px;
    height: 200px;
  }
  .fake-image .avatar-uploader .el-upload--picture-card{
    width: 300px;
    height: 200px;
    line-height: 200px;
  }
  .fake-image .avatar-uploader .el-progress{
    width: 190px;
  }
  .fake-image .avatar-uploader .el-progress-circle{
    width: 190px!important;
    height: 190px!important;
  }
</style>

data

qrcodeOptins