官方说了推荐大家使用官方版本,因为他也是整合别人的
官方地址
引入组件
在\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>