Vue封装一个简单轻量的上传文件组件的示例

一、之前遇到的一些问题

项目中多出有上传文件的需求，使用现有的UI框架实现的过程中，不知道什么原因，总会有一些莫名其妙的bug。比如用某上传组件，明明注明（:multiple="false"）,可实际上还是能多选，上传的时候依然发送了多个文件；又比如只要加上了（:file-list="fileList"）属性，希望能手动控制上传列表的时候，上传事件this.refs.[upload（组件ref）].submit()就不起作用了，传不了。总之，懒得再看它怎么实现了，我用的是功能，界面本身还是要重写的，如果坚持用也会使项目多很多不必要的逻辑、样式代码……

之前用Vue做项目用的视图框架有element-ui，团队内部作为补充的zp-ui，以及iview。框架是好用，但是针对自己的项目往往不能全部拿来用，尤其是我们的设计妹子出的界面与现有框架差异很大，改源码效率低又容易导致未知的bug，于是自己就抽时间封装了这个上传组件。

二、代码与介绍

父组件

父组件处理与业务有关的逻辑，我特意加入索引参数，便于界面展示上传结果的时候能够直接操作第几个值，并不是所有方法都必须的，视需求使用。

子组件

上传文件，html部分就这么一对儿标签，不喜欢复杂啰嗦

这里定义了父组件向子组件需要传递的属性值，注意，这里把方法也当做了属性传递，都是可以的。

自己写的组件，没有像流行框架发布的那样完备和全面，另外针对开头提到的绑定file-list就不能上传了的问题（更可能是我的姿势不对），本人也想极力解决掉自身遇到的这个问题，所以希望能对文件列表有绝对的控制权，除了action，把file-list也作为父组件必须要传递的属性。（属性名父组件使用“-”连接，对应子组件prop中的驼峰命名）

三、主要的上传功能

methods内一共4个方法，添加文件、移除文件、提交、检测（上传之前的检验），下面一一讲述：

1.添加文件

2.移除文件

这个简单,有时候在父组件叉掉某文件的时候，传一个index即可。

3.提交上传

这里使用了两种方式，fetch和原生方式，由于fetch不支持获取上传的进度，如果不需要进度条或者自己模拟进度或者XMLHttpRequest对象不存在的时候，使用fetch请求上传逻辑会更简单一些

4.基于上传的两套逻辑，这里封装了两个方法xhrSubmit和fetchSubmit

fetchSubmit

xhrSubmit

这里借鉴了element-ui的上传源码

最后把请求前的校验加上

如果父组件定义了onBefore方法且返回了false，或者文件列表为空，请求就不会发送。

代码部分完了，使用时只要有了on-progress属性并且XMLHttpRequest对象可访问，就会使用原生方式发送请求，否则就用fetch发送请求（不展示进度）。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax表单异步上传文件实例代码

下拉菜单的级联操作

Ajax实现省市区三级级联

以上就是Vue封装一个简单轻量的上传文件组件的示例的详细内容，更多请关注Gxl网其它相关文章！