[TOC]

多个位置都需要进⾏图⽚上传，可封装为组件便于复⽤。

引⼊到 create.vue 中 // create.vue … // 引⼊图⽚上传组件 import CourseImage from ‘./components/course-image’ export default { name: ‘CourseCreate’, components: { CourseImage }, … 使⽤组件⽅式：

⼦组件需要使⽤⽗组件中上传的⽂件数据进⾏上传与预览（⽗传⼦、传⼊）

⽗组件需要使⽤⼦组件上传后的线上地址⽤于提交（⼦传⽗、传出）

这时可以通过 v-model 对组件进⾏数据操作（v-model ⽤于组件操作的本质）

给⼦组件传递 value 数据，⼦组件需要通过 props 接收。

默认监听⼦组件的 input 事件，⼦组件需要触发⾃定义事件并传值。

// create.vue … v-model=“course.courseListImg”> v-model=“course.courseImgUrl”> … // course-image.vue … 封装图⽚上传组件 - 图2v-if=“value” :src=“value” class=“avatar”> …

封装组件时，除了可以通过传值设置必选数据外，还可以通过传参增强组件的使⽤灵活性，这⾥演示通过传参定制上传⽂件⼤⼩。

// course-image.vue … props: { … // 限制上传⼤⼩ limit: { type: Number, default: 2 } }, … // 上传⽂件之前的钩⼦ beforeAvatarUpload (file) { … const isLt2M = file.size / 1024 / 1024 < this.limit if (!isJPG) { this.$message.error(‘上传头像图⽚只能是 JPG 格式!’) } if (!isLt2M) { this.$message.error(上传头像图⽚⼤⼩不能超过 ${</font><font style="color:rgb(215,58,73);">this</font><font style="color:rgb(89,89,89);">.</font><font style="color:rgb(0,92,197);">limit</font><font style="color:rgb(102,153,0);">}MB!) } return isJPG && isLt2M }, …

使⽤组件时传⼊不同参数定制（如找不到⼤图，可将单位修改为 KB 进⾏测试）

// create.vue … v-model=“course.courseListImg” :limit=“2”> mage> v-model=“course.courseImgUrl” :limit=“5”> age> …