Day07-课程信息管理（4）--课程封面图片上传-p113

上一节：添加课程信息（3）–课程分类多级联动

参考 http://element-cn.eleme.io/#/zh-CN/component/upload 用户头像上传

1、需求

在课程添加表单中的课程封面处，点击默认头像，选择本地新的课程头像，进行上传。

2、上传封面前端组件

<!-- 课程封面 TODO -->
<!-- 课程封面-->
<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" width="200px" height="200px">
	</el-upload>
</el-form-item>

定义data数据

 BASE_API: process.env.BASE_API, // 接口API地址

3、定义方法

 //封面上传成功调用的方法
 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
 },