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


Posted in Javascript onMarch 16, 2018

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

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

https://github.com/iview/iview

官网是:

https://www.iviewui.com/

特性

  • 使用单文件的 Vue 组件化开发模式
  • 基于 npm + webpack + babel 开发,支持 ES2015
  • 高质量、功能丰富
  • 友好的 API ,自由灵活地使用空间
  • 详细、友好的文档,事无巨细

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

功能需求点

  • 上传选择文件 判断文件格式
  • 保存需要上传的文件,展示文件名
  • 提供删除文件功能(未上传前)
  • 上传文件

iView 提供的上传组件

<Upload
 multiple
 ref="upload"
 :before-upload="handleUpload"
 :show-upload-list="false"
 :on-success="uploadSuccess"
 action="//jsonplaceholder.typicode.com/posts/">
 <Button type="ghost" icon="ios-cloud-upload-outline">浏览</Button>
</Upload>
<div v-for="(item, index) in file">Upload file: {{ item.name }} 
 <a href="javascript:;" rel="external nofollow" @click="delectFile(item.name)">X</a>
 <Button style="margin-left:30px;"
  size="small"
  v-if="index === 0"
![](https://user-gold-cdn.xitu.io/2018/3/14/16223a8c12c38be9?w=649&h=743&f=png&s=55740)
  type="primary"
  @click="upload"
  :loading="loadingStatus">上传</Button>
</div>

用到的API参数 / 方法

  • multiple : 是否支持多选文件 默认 false
  • before-upload:上传文件这前的事件钩子,若返回 false 或者 Promise 则停止自动上传
  • show-upload-list: 是否显示已上传文件列表 默认为true
  • on-success: 上传文件成功后的事件钩子,返回 res(接口方返回的信息), file(上传文件), fileList(上传文件List)
  • action: 文件上传地址

上传选择文件 判断文件格式 保存文件

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

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

handleUpload (file) { // 上传文件前的事件钩子
 // 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作
 let keyID = Math.random().toString().substr(2);
 file['keyID'] = keyID;
 // 保存文件到总展示文件数据里
 this.file.push(file);
 // 保存文件到需要上传的文件数组里
 this.uploadFile.push(file)
 // 返回 falsa 停止自动上传 我们需要手动上传
 return false;
}

删除功能

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

上传文件

upload () { // 上传文件
 for (let i = 0; i < this.uploadFile.length; i++) {
  let item = this.file[i]
  this.$refs.upload.post(item);
 }
},

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

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

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

上传成功后

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

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

  • res 上传结果 成功与失败 上传之后的地址
  • file 此次上传的文件
uploadSuccess (res, file) { // 文件上传回调 上传成功后删除待上传文件
 console.log(response)
 console.log(file)
},

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

完整代码GitHub地址 https://github.com/bailin240/ArticleCode/tree/master/view/iViewUpload

总结

以上所述是小编给大家介绍的vue iView 上传组件之手动上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 #Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 #Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 #Javascript
p5.js入门教程之小球动画示例代码
Mar 15 #Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 #Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 #Javascript
Angularjs Promise实例详解
Mar 15 #Javascript
You might like
php反弹shell实现代码
2009/04/22 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
javascript CSS画图之基础篇
2009/07/29 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Django开发中的日志输出的方法
2018/07/02 Python
python网络应用开发知识点浅析
2019/05/28 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
软件项目实施计划书
2014/05/02 职场文书
酒桌上的开场白
2015/06/01 职场文书
法律意见书范文
2015/06/04 职场文书
世界名著读书笔记
2015/06/25 职场文书
mysql sock 文件解析及作用讲解
2022/07/15 MySQL