关于ElementUI的el-upload组件二次封装的问题

目录

• ElementUI的el-upload组件二次封装问题
• 组件
• 使用
• el-upload组件封装后更好用了
• 组件截图
• 组件代码部分

ElementUI的el-upload组件二次封装问题

开发工作中我们都会遇到图片上传的问题，虽说ElementUI已有提供图片上传的组件，但我们用到图片上传的地方肯定不止一处的，并且框架自带的组件并不能完全满足我们的需求，为此我对原有组件做了二次封装，做到一次封装，到处使用！

直接上代码：

组件

**uploadImg.vue**

使用

/*导入组件*/
import uploadImg from '@/components/uploadImg'
/*组件注册*/
export default {
    components: { uploadImg },
    data(){
        imgpath: '',
    },
    methods:{
        /*执行uploadImg组件报出来的事件，path就是显示图片的路径*/
        setCardPic(path, pic) {
          this.form[pic] = path
        },
        /*详情的时候设定显示图片的路径 setEditImg是uploadImg组件提供的方法 imgpath是子组件的ref属性（看使用的组件）*/
        this.$refs.imgpath.setEditImg('')
    }
}

效果：

el-upload组件封装后更好用了

对el-upload进行了简单的二次封装，实现了图片上传后回显的预览大图和移除图片。

组件截图

图片上传

图片的回显和操作

组件代码部分

引入组件试试吧～ 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。