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

基于 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 以后会支持一次上传多个吧,这个上传我开始一直找不到,不知道手动上传停止自己上传后怎么手动传,找功能找半天,在官方文档里也没有写,官方到是有一个例子手动上传的但:

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

上传成功后

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

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

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

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

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

总结

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

您可能感兴趣的文章:

  • vue.js element-ui tree树形控件改iview的方法
  • vue中使用iview自定义验证关键词输入框问题及解决方法
  • vue iview组件表格 render函数的使用方法详解
  • vue+iview+less+echarts实战项目总结
  • vue+iview写个弹框的示例代码
  • 基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
  • 浅谈vue的iview列表table render函数设置DOM属性值的方法
  • vue iview实现动态路由和权限验证功能
时间: 2018-03-13

vue+iview+less+echarts实战项目总结

首先我们先分享一下源码:https://github.com/kunfan96/vue-admin 对于我这种刚开始用Vue做项目的菜鸟来说在组件数据定义方面犯了很多错误,尤其是在这个页面 在进行数据回选的时候自己重定义已经定好的数据,导致数据非常杂乱无章,具体在storeDetail.vue的14--321行,感觉这么多数据非常有必要的进行裁剪,用js进行运算把数据补充完整,这里相对把后台的任务减轻了很多,只是额外增加前端渲染数据的量 父子组件数据通讯问题 刚开始写Modal的时候对于Moda

vue中使用iview自定义验证关键词输入框问题及解决方法

一.验证需求 对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法 在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru

vue.js element-ui tree树形控件改iview的方法

element-ui组件的tree树形控件修改源码改为iview组件 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自带checkbox等组件为iview的checkbox,并且兼容方法 最后修改element样式,改为iview风格,自己也添加了一些样式 新的tree组件可以说是element的逻辑,iview的风格 <template> <div @click.stop="handleClick" v-show=

vue iview组件表格 render函数的使用方法详解

如果要在标签中加入属性,例如img 中src属性   a标签中href属性  此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on

vue iview实现动态路由和权限验证功能

github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Github地址 iview-dynamicRouter 实现目标 客户端从服务端拿到路由和权限数据后,刷新项目的路由和菜单列表,并进行权限控制. 项目基础 基础框架: iview组件库官方模板项目 iview-admin 的template分支项目,此项目为 iview-admin 的基础框架代码.项目地

浅谈vue的iview列表table render函数设置DOM属性值的方法

如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属

vue+iview写个弹框的示例代码

iView 是一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品. 1.iView的特性 1) 高质量.功能丰富 2) 友好的API ,自由灵活地使用空间 3) 细致.漂亮的 UI 4) 事无巨细的文档 5) 可自定义主题 2.iView的安装: 1) 使用npm: npm install --save iview 2) CDN引入: <link rel="stylesheet" href="css/iview.css" rel="

基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架. V

基于VUE.JS的移动端框架Mint UI的使用

Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

Mint UI 基于 Vue.js 移动端组件库

官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

基于vue.js快速搭建图书管理平台

Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用. 1.DEMO样式 首先我们需要搭建一个简单的demo样式,推荐大家使用bootstrap,可以很快的搭建出一个清

基于vue.js实现的分页

本文主要介绍基于vue的分页原生写法. 先po上效果图: html部分,将page作为一个单独的组件 <script type="text/x-template" id="page"> <ul class="pagination"> <li v-show="current != 1" @click="current-- && goto(current)">

详解基于vue的服务端渲染框架NUXT

Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用

基于vue.js轮播组件vue-awesome-swiper实现轮播图

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

基于vue.js路由参数的实例讲解——简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

基于node.js express mvc轻量级框架实践

本文记录的是笔者最近抽私下时间给朋友做的一个时时彩自动下注系统,比较简单,主要也是为了学习一下node.js. 其实逻辑没什么可以深谈的,主要是想说说这套代码结构.结构如下图: js的代码比较难以维护,不清楚大家对于这点是否认同,但这里笔者只说自己的感受,笔者的朋友一开始找到笔者,说玩时时彩,一直盯着玩,会因为贪心会乱来,想做个自动下注系统, 让程序自己玩.一开始,笔者也只想敷衍了事,直接拿node.js+express整了下面这套结构. 基本和express 示例代码没啥两样.但是随着需求的变

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我