需求:app.vue给上传组件一个图片地址,该组件能回显出来
- 1:先通过父子传值将图片地址传过去
在子组件标签定义一个属性 value=值
子组件通过props接收 props:[“value”]
子组件接收图片路径后,将上传组件的img标签上的imageUrl换成相应的props传参value - 2:修复上传功能(上传成功后,图片路径没有使用上)
通过父组件修改value的值
1:在子组件标签绑定一个方法 @input="父组件方法"
2:在子组件内触发父组件方法,并传递图片路径
在图片上传成功后.触发父组件方法并传递图片路径
this.$emit(‘input’,res.data.url)
3:父组件接收参数,将该值传给value对应的值 - 3:使用
v-model
简写父组件的写法
el-upload属性介绍
- el-upload
- action:上传接口地址
- name:上传文件对应的参数名
- show-file-list:是否显示文件列表
- :before-upload:上传前的处理
- function(file){
- file.type:文件类型
- file.size:文件大小(字节)
- return boolean值 true:正常上传 false:中止上传
}
:on-success:“上传后处理”
function(res,file){
res:接口返回值
file: file.response:接口返回值
file.raw:上传的文件对象 type size
}
实现
<template>
<el-upload
class="avatar-uploader"
:action="baseUrl+'/question/upload'"
name="file"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="value" :src="baseUrl + '/' + value" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
export default {
props: ['value'],
data () {
return {
imageUrl: '',
baseUrl: process.env.VUE_APP_URL
}
},
methods: {
handleAvatarSuccess (res) {
this.$emit('input', res.data.url)
},
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG,PNG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
}
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.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>
<template>
<div id="app">
<upload :value="imageUrl" @input="inputEvent"></upload>
</div>
</template>
<script>
import upload from '@/components/upload'
export default {
name: 'App',
components: {
upload
},
data () {
return {
imageUrl: 'upload/20201127/a5892332dc3cd91b39f8b57d61411dcc.jpeg'
}
},
methods: {
inputEvent(msg){
this.imageUrl = msg
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<div id="app">
<!-- <upload :value="imageUrl" @input="inputEvent"></upload> -->
<upload v-model="imageUrl"></upload>
<upload v-model="imageUrl1"></upload>
</div>
</template>
<script>
import upload from '@/components/upload'
export default {
name: 'App',
components: {
upload
},
data () {
return {
imageUrl: 'upload/20201127/a5892332dc3cd91b39f8b57d61411dcc.jpeg',
imageUrl1: 'upload/20201127/a5892332dc3cd91b39f8b57d61411dcc.jpeg'
}
},
methods: {
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- 效果: