使用  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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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("请至少上传一个文件");
}
}

iview Upload组件多个文件上传的更多相关文章

  1. Flash上传组件之SWFUpload文件上传

    一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而 ...

  2. common-fileupload组件实现java文件上传和下载

    简介:文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...

  3. JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  4. 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

    实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...

  5. 用jQuery File Upload实现简单的文件上传

    FORM中的代码: {# file_path #} <div class="form-group"> <label class="control-lab ...

  6. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  7. WEB文件上传之apache common upload使用(一)

    文件上传一个经常用到的功能,它有许多中实现的方案. 页面表单 + RFC1897规范 + http协议上传 页面控件(flash/html5/activeX/applet) + RFC1897规范 + ...

  8. Spring Boot + Vue 前后端分离,两种文件上传方式总结

    在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 U ...

  9. .JavaWeb文件上传和FileUpload组件使用

    .JavaWeb文件上传 1.自定义上传 文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...

随机推荐

  1. 红帽Linux故障定位技术详解与实例(3)

    红帽Linux故障定位技术详解与实例(3)   在线故障定位就是在故障发生时, 故障所处的操作系统环境仍然可以访问,故障处理人员可通过console, ssh等方式登录到操作系统上,在shell上执行 ...

  2. 什么是IoC和DI?DI是如何实现的?

    IoC叫控制反转,是Inversion of Control的缩写,控制反转是把传统上由程序代码直接操控的对象的调用权交给容器,通过容器来实现对象组件的装配和管理.所谓的"控制反转" ...

  3. Binding 指令实现双向数据绑定

    代码 #方法一:ng-bind的使用 #方法二:{{}}插值表达式的使用 <!doctype html> <html> <head> <meta charse ...

  4. #5 DIV2 A POJ 3321 Apple Tree 摘苹果 构建线段树

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 25232   Accepted: 7503 Descr ...

  5. hdu_3535 (AreYouBusy)

    http://acm.hdu.edu.cn/showproblem.php?pid=3535 题意:        给你n个工作集合,给你T的时间去做它们.给你m和s,说明这个工作集合有m件事可以做, ...

  6. 前端js图片上传

    前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...

  7. sass用法总结(持续更新中)

    官网:https://www.sass.hk/ 1,嵌套规则 1.1普通嵌套:Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器 1.2父选择器 &: ...

  8. linux 系统的 cache 过大,解决方案

    linux buff/cache过大,清理脚本 2018年06月20日 13:44:53 taozhe666 阅读数:6500   三条指令: sync echo 1 > /proc/sys/v ...

  9. CSS Selectors

    CSS selectors are used to "find" (or select) HTML elements based on their element name, id ...

  10. C++入门经典-例4.6-使用重载函数

    1:代码如下: // 4.6.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...