vue前端完成头像上传
<template>
<div class="app-container">
<el-form-item label="讲师头像">
<el-upload
:show-file-list="true"
:on-success="handleAvatarSuccess"
:on-error="handleAvatarError"
:before-upload="beforeAvatarUpload"
class="avatar-uploader"
:action="BASE_API+'/eduOss/fileOss'">
<img v-if="" :src="">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
</el-form-item>
<span style="margin-left: 8.7%;font-size: 20px; font-weight: 400;">*点击图片框修改头像*</span>
<br /><br /><br />
<el-form-item>
<el-button :disabled="saveBtnDisabled" plain="true" type="primary" @click="saveOrUpdate">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
//引入上传头像的功能组件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
components: {ImageCropper,PanThumb}, //组件的声明
data() {
return {
}, //v-model双向绑定
imagecropperShow: false, //上传弹框组件是否显示
imagecropperKey: 0, //上传组件唯一标识
BASE_API: process.env.BASE_API, //获取里面地址
saveBtnDisabled: false //保存按钮是否禁用
}
},
created() { //页面渲染前执行
},
watch: { //vue的监听
$route(to, from) { //路由变化方式，路由一发生变化 就执行方法
this.init()
}
},
methods: {
// 文件上传成功
handleAvatarSuccess(response) {
if (response.success) {
this.teacher.avatar = response.data.url
// 强制重新渲染
this.$forceUpdate()
} else {
this.$message.error('上传失败! （非20000）')
}
},
// 文件上传失败（http）
handleAvatarError() {
this.$message.error('上传失败! （http失败）')
},
// 上传校验
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt3M = file.size / 1024 / 1024 < 3
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt3M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt3M
},
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar-uploader img {
width: 178px;
height: 178px;
display: block;
}
</style>