需求,封装封装Element-ui的upload组件实现图片和文件的上传
vue+element能够满足大部分的前端UI开发,今天的我们就以Element-ui的upload组件实现图片和文件的上传;
上传前
上传后
注意
仅支持png和jpg的上传,上传后的图片返回Base64和图片File
<template>
<div style="display: flex;align-items: center">
<span style="margin-right: 10px">图片上传</span>
<ZhbImgFile
type="appIconUrl"
:imgUrl="appIconUrlTrue"
ref="upfile"
@func="getImgBase64"></ZhbImgFile>
</div>
</template>
<script>
export default {
data() {
return {
appIconUrlTrue:''
};
},
methods: {
//获取图片
getImgBase64(data) {
console.log(data);
},
},
};
</script>
返回图片信息
{type:this.type,base64:this.imgBase64,imgFile:this.file}
备注:更多使用组件请查看zhb-ui文档