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 相关文章推荐
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
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
PHP聊天室技术
2006/10/09 PHP
PHP中ADODB类详解
2008/03/25 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
python实现日常记账本小程序
2018/03/10 Python
python matlibplot绘制3D图形
2018/07/02 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python二元表达式用法
2019/12/04 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
基于python实现地址和经纬度转换
2020/05/19 Python
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
教学大赛获奖感言
2014/01/15 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书