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在textarea光标处插入文本的小例子
Mar 22 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 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
基于文本的留言簿
2006/10/09 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
各种快递查询--Api接口
2016/04/26 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
js实现网页收藏功能
2015/12/17 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
Python教程之全局变量用法
2016/06/27 Python
pandas 选择某几列的方法
2018/07/03 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
PyTorch-GPU加速实例
2020/06/23 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
Java中实现多态的机制
2015/08/09 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
学校欢迎标语
2014/06/18 职场文书
欢度春节标语
2014/07/01 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
办公经费申请报告
2015/05/15 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis