谷粒学院77——课程封面的添加

后端部分可以直接复用之前头像上传的接口。前端在info.vue新增封面组件。

      <!-- 课程封面-->
      <el-form-item label="课程封面">
          <el-upload
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :action="BASE_API + '/eduoss/fileoss/uploadOssFile'"
                    class="avatar-uploader"
                    >
              <img :src="courseInfo.cover" />
          </el-upload>
      </el-form-item>

对ui绑定的方法实现。

//上传封面成功调用的方法
handleAvatarSuccess(resp,file) {
    this.courseInfo.cover = resp.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;
    }

效果如下。

为了使效果对于用户更加友好，我们增加一个默认封面，在前端的static下存放index.jpg作为默认封面。在data中对cover设置默认值,还有记得对于BASE_API给值。

 data() {
    return {
      ...
      courseInfo: 
        {
         ...
          cover: "/static/index.jpg",
        },
         BASE_API: process.env.BASE_API, //从dev.env.js中获取
     ...
    }
}

效果如下，点击封面还可以进行切换。