Vue菜鸟之路: 封装上传组件

为什么80%的码农都做不了架构师？>>>   

前言

vue的菜鸟学习之路,从封装一个简单的上传组件开始,菜鸟摸索,大佬轻喷..(不服可以来写Java ....当我没说)

设计

1. 利用vue的父子组件传递来实现通用上传组件
2. 通过axios来实现图片的异步上传
3. 图片上传组件支持图片上传/预览/修改/删除,todo 支持进度条
4. 由于vue的组件传递机制(只能由父->子,无法子->父),提供图片上传后的回掉机制

实现

代码

Talk is cheap,show me the code

1. 父组件通过image和id字段传递图片model的属性,通过id和image来判断是否编辑的预览
2. 上传组件通过axios formData形式异步上传图片,成功后通过[$emit] 来回调调用方的方法,这里回调方法定为complete,返回传递进来的imageId唯一标示和图片url
3. 限制图片大小和是否删除按钮可通过配置参数传递,目前暂只支持删除按钮配置,图片大小hardcode...todo

调用示例

组件集成

组件回调

vue的methods方法绑定uploadComplete

uploadComplete: function(obj) {
      console.log(obj);
      if (obj.imageId === "imageUrl") {
        this.data.imageUrl = obj.url;
      } else if (obj.imageId === "shareIcon") {
        this.data.shareIcon = obj.url;
      } else {
      }
    }

转载于:https://my.oschina.net/KelinM/blog/3055490