vue iView 上传组件之手动上传功能

基于 Vue 的 UI 组件库现在已经有很多了，尤其是移动端的。现在又多了一个 iView 。

iView 主要服务于 PC 界面的中后台业务，是一套高质量的开源 UI 组件库，先上地址：

官网是：

最近做一个后台系统用的功能总结下遇见的问题

功能需求点

iView 提供的上传组件

用到的API参数 / 方法

选择文件后会调用方法，在里面做的事情有判断文件类型是否满足需求，如果满足就保存到需要上传的文件List里，这里我们需要自己定义一个keyID,应为是动上传需要展示，删除功能，如果没有唯一ID不知道删除那个

这里如果允许文件上传了不用但心什么，此钩子会把选择的当数组一样需要调用上文件事件前的钩子事件，所以也不能但心多文件选择只会生成一个KeyID

{ return item.name != name }) // 删除需要上传文件数据里的当前文件 this.uploadFile = this.uploadFile.filter(item => { return item.KeyID != keyID }) }

这里如果是多文件的时候需要循环上传一个一个来，如果一次上传多个组件会报错，只支持一次上传一个文件，希望iView 以后会支持一次上传多个吧，这个上传我开始一直找不到，不知道手动上传停止自己上传后怎么手动传，找功能找半天，在官方文档里也没有写，官方到是有一个例子手动上传的但：

并没有事实上传的操作这里也只是模拟啦上传方法是在源码里找到的

应该我们的上传文件功能和提交整个页面的数据是分开的所以提交数据的时候需要验证选择文件是否以上传在上传成功事件里让后右把我们传过去的数据返出来做清空待上传文件数组里的数据，提交数据时候只需要判断待上传文件数组是否为空就可以了

文件上传回调返回三个参数

这里有个小问题应该上传的时候是循环调用上传的，如果多个文件上传这里会有多个回调结果不能成功一个文件提示用户一次，所以需要处理一下，这里自定义一个数每次回调回来作自增处理，当值与上待上传文件的length 相等时才提示上传结果

完整代码GitHub地址

以上所述是小编给大家介绍的vue iView 上传组件之手动上传功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文链接：https://www.f2er.com/vue/33163.html

猜你在找的Vue相关文章