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属性,否则只会上传原图,还有就是跨域问题,必须没位置跨域问题,不同源就会报错,即使服务器容许跨域也没用,因为它有自身的房防跨域机制。