一 组件模板
在Info.vue中添加上传组件模板
<!-- 课程封面 -->
<el-form-item label="课程封面">
<!-- class:上传控件的样式 -->
<el-upload
:show-file-list="false"
:on-success="handleCoverSuccess"
:before-upload="beforeCoverUpload"
:on-error="handleCoverError"
class="cover-uploader"
action="http://localhost:8120/admin/oss/file/upload?module=cover">
<img v-if="courseInfo.cover" :src="courseInfo.cover">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
</el-form-item>
css
<style>
.cover-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.cover-uploader .el-upload:hover {
border-color: #409EFF;
}
.cover-uploader .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 640px;
height: 357px;
line-height: 357px;
text-align: center;
}
.cover-uploader img {
width: 640px;
height: 357px;
display: block;
}
</style>
二 回调函数
// 上传成功回调
handleCoverSuccess(res, file) {
if (res.success) {
// console.log(res)
this.courseInfo.cover = res.data.url
// 强制重新渲染
this.$forceUpdate()
} else {
this.$message.error('上传失败1(非20000)')
}
},
// 上传校验
beforeCoverUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
// 错误处理
handleCoverError() {
console.log('error')
this.$message.error('上传失败(http错误)')
}