iview Upload组件多个文件上传
使用 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("请至少上传一个文件");
}
}
iview Upload组件多个文件上传的更多相关文章
- Flash上传组件之SWFUpload文件上传
一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而 ...
- common-fileupload组件实现java文件上传和下载
简介:文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...
- 用jQuery File Upload实现简单的文件上传
FORM中的代码: {# file_path #} <div class="form-group"> <label class="control-lab ...
- Element ui 上传文件组件(单文件上传) 点击提交 没反应
element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...
- WEB文件上传之apache common upload使用(一)
文件上传一个经常用到的功能,它有许多中实现的方案. 页面表单 + RFC1897规范 + http协议上传 页面控件(flash/html5/activeX/applet) + RFC1897规范 + ...
- Spring Boot + Vue 前后端分离,两种文件上传方式总结
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 U ...
- .JavaWeb文件上传和FileUpload组件使用
.JavaWeb文件上传 1.自定义上传 文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...
随机推荐
- 红帽Linux故障定位技术详解与实例(3)
红帽Linux故障定位技术详解与实例(3) 在线故障定位就是在故障发生时, 故障所处的操作系统环境仍然可以访问,故障处理人员可通过console, ssh等方式登录到操作系统上,在shell上执行 ...
- 什么是IoC和DI?DI是如何实现的?
IoC叫控制反转,是Inversion of Control的缩写,控制反转是把传统上由程序代码直接操控的对象的调用权交给容器,通过容器来实现对象组件的装配和管理.所谓的"控制反转" ...
- Binding 指令实现双向数据绑定
代码 #方法一:ng-bind的使用 #方法二:{{}}插值表达式的使用 <!doctype html> <html> <head> <meta charse ...
- #5 DIV2 A POJ 3321 Apple Tree 摘苹果 构建线段树
Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 25232 Accepted: 7503 Descr ...
- hdu_3535 (AreYouBusy)
http://acm.hdu.edu.cn/showproblem.php?pid=3535 题意: 给你n个工作集合,给你T的时间去做它们.给你m和s,说明这个工作集合有m件事可以做, ...
- 前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...
- sass用法总结(持续更新中)
官网:https://www.sass.hk/ 1,嵌套规则 1.1普通嵌套:Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器 1.2父选择器 &: ...
- linux 系统的 cache 过大,解决方案
linux buff/cache过大,清理脚本 2018年06月20日 13:44:53 taozhe666 阅读数:6500 三条指令: sync echo 1 > /proc/sys/v ...
- CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id ...
- C++入门经典-例4.6-使用重载函数
1:代码如下: // 4.6.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...