Vue学习笔记：封装Element-ui的upload组件实现图片和文件的上传

本文主要是介绍Vue学习笔记：封装Element-ui的upload组件实现图片和文件的上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求，封装封装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><ZhbImgFiletype="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文档

https://zhbnyx.github.io/zhb-docs/

 

这篇关于Vue学习笔记：封装Element-ui的upload组件实现图片和文件的上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---