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 写的个性导航菜单
Dec 24 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 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遍历文件夹与子目录的函数代码
2011/09/26 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
js版本A*寻路算法
2006/12/22 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
Python 专题一 函数的基础知识
2017/03/16 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
疾病捐款倡议书
2014/05/13 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2019各种保证书范文
2019/06/24 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript