EL-Upload

先来看看这个组件都有哪些props

可以看到它可以传的参数还是非常多的，其中钩子函数也不少（作为一个公共组件，我们尽量减少与某些业务强相关的逻辑，而应该使用暴露钩子函数方式，让调用者更灵活处理）

那它实现的功能又有哪些呢？

1. 点击上传

2. 头像上传

3. 照片墙

4. 文件缩略图

5. 图片列表缩略图

6. 上传文件列表控制

7. 拖拽上传

8. 手动上传

 

下面我们看看它的基本使用结构

我们先从最基本的功能看起：

注意看  其实函数也是可以通过props的方式传进来的，而不需要使用@onSuccess = xxx  this.$emit( ‘ onSuccess ’ ) 去调用它

尤其是钩子函数

Index.vue源码部分

 

再看看upload组件部分

可以看到  尽管在父组件传进来的...拓展过的props对象  但是在upload组件中依然可以使用props获取到 不会影响正常使用

我们看看upload的render函数

 

现在我们就开始最基本的上传功能分解：点击--选择--上传--触发钩子函数

我们来重点关注ajax的写法 以及xhr的一些关键api

那假如我们想中止上传怎么处理呢？

下面我们看看上传文件列表组件是怎么展示的以及有哪些

 

最后我们再看看拖动上传是怎么回事？

这里需要注意的是 @drap 和 @drapover @drapleave都是Vue给我们提供的拖动api

我们可以在drap的e中获得当前拖动的文件对象  e.dataTransfer.files  它跟我们单独选的文件对象是一样的结构

---

至此  el-upload上传组件就分析完毕了