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实现动态路由和权限验证功能
赞 (0)

相关推荐

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

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

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

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

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

  • 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 element-ui tree树形控件改iview的方法

    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自定义验证关键词输入框问题及解决方法

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

  • 浅谈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实现动态路由和权限验证功能

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

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

    基于 Vue 的 UI 组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库,先上地址: https://github.com/iview/iview 官网是: https://www.iviewui.com/ 特性 使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量.功能丰富 友好的 API ,自由灵活地使用空间 详细.友好的

  • vue iview的菜单组件Mune 点击不高亮的解决方案

    前言: 在项目中,我用到了vue +iview + vue-router 开发: 然后导航条就使用了iview的Menu组件,结果发觉导航条的内容点击一次之后不会显示高亮样式,而是先跳转了,我再点击一次,才会高亮显示. 在看了vue-router的文档之后,发觉有一个很好用的东西,就是router-link的属性: active-class 和 exact. 为什么要使用router-link? 官网上说明了这几点好处: 组件支持用户在具有路由功能的应用中(点击)导航. 通过 to 属性指定目标

  • vue iview 隐藏Table组件里的某一列操作

    1.假设我要隐藏columns里的 "账户组名称" columns: [ { type: 'selection', width: 60, align: 'center' }, { title: '账号ID', key: 'accountIdString' }, { title: '账号名称', key: 'accountName' }, { title: '账户组名称', key: 'accountGroupName' }] 2.根据各自需求去判断 示例:如果是单账户表标题显示&quo

  • vue quill editor 使用富文本添加上传音频功能

    1. 前言 vue-quill-editor 是vue项目中常用的富文本插件,其功能能满足大部分的项目需求.但是,最近项目中,需要在富文本中上传音频文件,但是vue-quill-editor这个富文本仅支持图片,视频上传:所以这个功能需要自定义. 怎么实现这个功能? 写一个只能上传音频的组件,并且隐藏 在富文本插件的toolbar定义一个按钮,点击时调用上传组件 监听上传成功的回调函数,在富文本输入框中插入音频标签 2. 功能实现 2.1 基于Element-ui实现上传组件,并且隐藏(不能让用

  • react中antd Upload手动上传的示例

    react中antd Upload手动上传的示例

    目录 情况介绍 实现方法 1.初始化 2.上传表单和图片 3.图片回显 情况介绍 在antd官方提供的upload组件案例中,都使用了action属性直接上传,唯一手动上传的一个例子(如下图)也不够好用,可能不能满足项目的需求,所以我们需要对其进行一些修改,并加入一些别的方法. 我们经常会使用antd的form表单上传数据,有时就会需要同时上传图片.所以在这里我们需要实现的是,前端页面上传多张图片时,先存储在前端,当表单上传时,和表单数据一起上传到后端. 实现方法 1.初始化 首先,在最前面引入

  • 使用fileupload组件实现文件上传功能

    使用fileupload组件实现文件上传功能

    FileUpload文件上传 fileUpload是apache的commons组件提供的上传组件,它最主要的工作就是帮我们解析request.getInpustream(). 使用fileUpload组件首先需要引入两个jar包: commons-fileUpload.jar commons-io.jar fileUpload的核心类有DiskFileItemFactory.ServletFileUpload.FileItem. 使用fileUpload固定步骤: 创建工厂类:DiskFile

  • vue+iview分页组件的封装

    vue+iview的分页组件封装 1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer { margin-right: 0; } } 3.index.js文件 import "./index.less"; import component from

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

    一.之前遇到的一些问题 项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总会有一些莫名其妙的bug.比如用某上传组件,明明注明(:multiple="false"),可实际上还是能多选,上传的时候依然发送了多个文件:又比如只要加上了(:file-list="fileList")属性,希望能手动控制上传列表的时候,上传事件this.refs.[upload(组件ref)].submit()就不起作用了,传不了.总之,懒得再看它怎么实现了,我

  • vue+iview实现文件上传

    vue+iview文件上传(base64编码.类型验证.大小限制.多文件上传及文件预览) ​ iview对文件上传提供了一个专门的标签Upload,不过这个标签默认需要一个接口action属性,但一般我们向后台上传文件并不会选择文件直接就上传了 而是需要和其他的值一起发送请求给后台,并且文件都是转成base64编码. iview提供了一个方法阻止默认上传:before-upload这个方法是在上传文件之前做的一些操作,当这个方法返回false表示手动上传,不会通过action属性来提交文件 ba

随机推荐