iview Upload组件多个文件上传的示例代码


Posted in Javascript onSeptember 30, 2018

使用  iview Upload 上传组件 手动上传 包括单个文件和多个文件

思路:创建一个数组 把需要上传的文件 push到这个数组里面

1.引用组件

2.手动上传,根据官方文档 设置:before-upload ="handleUpload"等于false

(1).:before-upload 是 iview Upload 上传组件的一个属性 设置返回值为 false 可以阻止默认上传方式(自动上传模式)

(2).handleUpload 是方法  *备注:代码在最后面

3.上传方法

 

//创建 formData 对象
          let formData = new FormData();
          //向 formData 对象中添加文件--这是其他参数
          formData.append('jsid', _jsid);

          //多个文件上传----------重点----需要吧已经存储到本地的文件加入 formData所以这里用for循环

          for(var i=0; i< that.file.length; i++){ 
           formData.append("uploadFile",that.file[i]);  // 文件对象  
          }

HTML代码如下:

<FormItem label="应标资料" v-show="islook">
          <template>
            <Upload
              multiple
              ref="upload"
              type="drag"
              :format="['docx','doc','txt', 'pdf']"
              :max-size="5000"
              :before-upload="handleUpload"
              :action="http">
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或者拖拽到此次上传文件</p>
              </div>
            </Upload>
            <div>
              <ul class="file-list" v-for="(list,index) in file" :key="index">
                <li>文件名: <span style="font-size:15px;">{{ list.name }}</span> <Icon type="ios-close" size="20" style="float:right;" @click="delFileList(index)"></Icon></li>
              </ul>
            </div>
          </template>
        </FormItem>


        <FormItem v-show="islookshenghe">
          <h3>已经提交数据-正在等待审核</h3>
          <Button type="primary" @click="gobackfanhui">返回</Button>
        </FormItem>

        <FormItem v-show="islook">
          <Button type="primary" :loading="loading2" icon="ios-power" @click="upload">
            <span v-if="!loading2">接受并提交应标信息</span>
            <span v-else>正在上传文件中...</span>
          </Button>      

          <p style="color:red;font-size:15px;" v-show="isfiletihsi">请上传文件</p>
        </FormItem>

JS代码

delFileList(index){
        let that = this;
        that.file.splice(index, 1);
        
        console.log(that.file);
      }
handleUpload (file) {
        let that = this;
        if(that.file.length >= 5){
          this.$Message.info("最多只能上传5个文件");
        }else{
          that.file.push(file);
        }
        return false;
      }

axios提交方法代码:

upload(){
        let that = this;
        let _jsid = that.$route.query.id;
        if(that.file.length > 0){
          that.loading2 = true;
          //创建 formData 对象
          let formData = new FormData();
          //向 formData 对象中添加文件
          formData.append('jsid', _jsid);

          //多个文件上传
          for(var i=0; i< that.file.length; i++){ 
           formData.append("uploadFile",that.file[i]);  // 文件对象  
          } 

          let config = {
           headers: {
            'Content-Type': 'multipart/form-data'
           }
          }

          axios.post(that.http + "/shweb/gys/gysmsge/gysuploads.action", formData, {
                timeout: 10000,
                headers: {
                  'Content-Type': 'multipart/form-data'
                }
              }).then(function (rdata) {
                that.loading2 = false;
                if(rdata.data == "0"){
                  that.islook = false;
                  that.islookshenghe = true;
                }
                console.log(rdata);
              }).catch(function (error) {
                that.loading2 = false;
               that.$Message.error('服务器错误' + error);
              });
        }else{
          that.$Message.error("请至少上传一个文件");
        }
      }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
JS快速实现简单计算器
Apr 08 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
VUE 配置vue-devtools调试工具及安装方法
Sep 30 #Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 #Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 #Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 #Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 #Javascript
You might like
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python实现杨氏矩阵查找
2019/03/02 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
2014年三万活动总结
2014/04/26 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
趣味运动会广播稿
2015/08/19 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis