1-先封装一个uploadImage.vue组件
<template>
<div class="photo">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="handleUpload">
<!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
<img v-if="value" :src="value" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { uploadImage } from '@/services/user'
export default Vue.extend({
props: {
value: String
},
data () {
return {
imageUrl: ''
}
},
methods: {
handleAvatarSuccess (res: any, file: any) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload (file: any) {
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
},
async handleUpload (options: any) {
console.log(options, 'options')
const fd = new FormData()
fd.append('image', options.file)
const res = await uploadImage(fd)
console.log(res)
this.$emit('input', res.data.data.url)
}
}
})
</script>
<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
2-在父组件中引入 upload组件
<template>
<div class="course">
<CourseImage v-model="imageUrl"></CourseImage>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import CourseImage from './components/CourseImage.vue'
export default Vue.extend({
name: 'Course',
components: {
CourseImage
},
data () {
return {
imageUrl: '',
course: {
courseListImg: null
}
}
}
})
</script>
<style lang="scss" scoped>
</style>