使用過的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屬性，否則只會上傳原圖，還有就是跨域問題，必須沒位置跨域問題，不同源就會報錯，即使服務器容許跨域也沒用，因爲它有自身的房防跨域機制。