其中注意的是需要引入两个组件:
vue页面的写法;
<template>
<div>
<!-- 讲师头像:TODO -->
<!-- 讲师头像 -->
<el-form-item label="讲师头像">
<!-- 头衔缩略图 -->
<pan-thumb :image="teacher.avatar"/>
<!-- 文件上传按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
</el-button>
<!--
v-show:是否显示上传组件
:key:类似于id,如果一个页面多个图片上传控件,可以做区分
:url:后台上传的url地址
@close:关闭上传组件
@crop-upload-success:上传成功后的回调 -->
<image-cropper
v-show="imagecropperShow"
:width="300"
:height="300"
:key="imagecropperKey"
:url="BASE_API+'/ossservice/file/uploadFile'"
field="file"
@close="close"
@crop-upload-success="cropSuccess"/>
</el-form-item>
</div>
</template>
<script>
// 引入头像上传组件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
components: { ImageCropper, PanThumb }, // 加载components 的组件
data(){
return {
teacher:{
avatar:''
},
saveBtnDisabled : false,
// 上传头像需要的参数-0·
imagecropperShow:false, // 是否显示上传组件
imagecropperKey:0, // 上传组件id ,要变化
BASE_API:process.env.BASE_API, // 接口API地址
}
},
created(){
},
methods:{
// 上传成功后的回调函数
cropSuccess(data) {
console.log(data)
this.imagecropperShow = false
this.teacher.avatar = data.url
// 上传成功后,重新打开上传组件时初始化组件,否则显示上一次的上传结果
this.imagecropperKey = this.imagecropperKey + 1
},
// 关闭上传组件
close() {
this.imagecropperShow = false
// 上传失败后,重新打开上传组件时初始化组件,否则显示上一次的上传结果
this.imagecropperKey = this.imagecropperKey + 1
}
}
}
</script>
效果展示
列表中展示图片代码
<el-table-column
header-align="center"
align="center"
label="品牌logo">
<template slot-scope="scope">
<img :src="scope.row.logo" width="100px" height="100px"></img>
</template>
</el-table-column>
效果展示