使用过的vue组件记录

1、pc端裁剪头像，使用的是vue-core-image-upload， github地址：https://github.com/Vanthink-UED/vue-core-image-upload   中文文档：https://vanthink-ued.github.io/vue-core-image-upload/index.html#/cn/get-started

2、开始使用 cnpm i vue-core-image-upload --save

3、引入方法（在main.js引入报错，只好用如下咯）

import VueCoreImageUpload from 'vue-core-image-upload'export default {  components: {    'vue-core-image-upload': VueCoreImageUpload,  },

4、 代码：

<vue-core-image-upload
    class="btn btn-primary"
    crop="local"
    cropRatio="1:1"
    :data='data'
    @imageuploaded="imageuploaded"
    :max-file-size="5242880"
    :url="url">
  </vue-core-image-upload>

  data(){
      return{
        data:{},
        src: '',
        url:'http://localhost/test/upload.php'
        }
    }

//上传成功的方法

  imageuploaded(res) {
        alert('res = '+res)
    }

样式或者修改加入如下即可：(建议把position设置为relative，然后在设置margin-top来调整位置)

<style scoped lang='scss'>

//修改盒大小

.btn-primary{width: 5rem;height: 5rem;top: 0.0rem; border-radius:50%; position:absolute;background-color: transparent !important;}
</style>

//修改组件颜色

<style type="text/css">
  .image-mask .mask{background-color: rgba(0,0,0,0.5) !important}
</style>

4、注意，裁剪的时候一定要加上data属性，否则只会上传原图，还有就是跨域问题，必须没位置跨域问题，不同源就会报错，即使服务器容许跨域也没用，因为它有自身的房防跨域机制。