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 相关文章推荐
js中通过父级进行查找定位元素
Jun 15 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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 命令行参数详解及应用
2011/05/18 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[00:14]护身甲盾
2019/03/06 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
安全责任书怎么写
2014/07/28 职场文书
学生吸烟检讨书
2014/09/14 职场文书
离婚协议书范本
2015/01/26 职场文书
就业意向书范本
2015/05/11 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
辩论赛新闻稿
2015/07/17 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL