一、整合上传组件
参考 http://element-cn.eleme.io/#/zh-CN/component/upload 用户头像上传
1、上传默认封面
创建文件夹cover,上传默认的课程封面
2、定义默认封面
<!-- 课程封面-->
<el-form-item label="课程封面">
<el-upload
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:action="BASE_API+'/eduoss/fileoss/'"
class="avatar-uploader">
<img :src="courseInfo.cover">
</el-upload>
</el-form-item>
3、定义data数据
BASE_API: process.env.BASE_API, // 接口API地址
4、组件模板
在info.vue中添加上传组件模板
<!-- 课程封面-->
<el-form-item label="课程封面">
<el-upload
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:action="BASE_API+'/admin/oss/file/upload?host=cover'"
class="avatar-uploader">
<img :src="courseInfo.cover">
</el-upload>
</el-form-item>
5、结果回调
//上传封面成功
handleAvatarSuccess(res,file){
this.courseInfo.cover=res.data.url
},
//上传之前调用的方法
beforeAvatarUpload(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
},