iview 获取文件本地路径_使用vue+iview实现上传文件及常用的下载文件的方法

首先说明一下，我们这次主要用的还是iview的upload上传组件，下面直接上代码

ref="upload"

multiple='true' //是否支持多文件上传

:show-upload-list="true" //显示上传的文件

:before-upload="handleUpload" //上传前需要的一些操作

:data="uploadFile"　　//上传的文件保存的地方

:on-success="uploadSuccess" //上传成功时调用的方法

:headers='{"Authorization": session}' //这里是设置的请求头token

:action="actionUrl" //这是上传时的后台接口

>

选择Excel文件：选择上传文件

下面是上传时我们需要调用的一些方法

importExcel(url){

this.modalImport = true;

this.$refs.upload.clearFiles();//清除上次上传记录

this.file = [];

this.uploadFile = [];

},

uploadSuccess(response, file, fileList){

this.$Message.info(response.msg);

// this.modalImport = false

debugger

this.init(0, 20);

},

clear(){

this.$refs.upload.clearFiles();//清除上次上传记录

},

handleUpload (file) { // 上传文件前的事件钩子

// 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作

let keyID = Math.random().toString().substr(2);

file['keyID'] = keyID;

// 保存文件到总展示文件数据里

this.file.push(file);

// 保存文件到需要上传的文件数组里

this.uploadFile.push(file)

// 返回 falsa 停止自动上传 我们需要手动上传

//如果需要手动上传文件，需要把这里注释放开并放开上面代码块中的被注释的两个按钮，就可以进行手动上传了

//return false

},

upload () { // 上传文件

for (let i = 0; i < this.uploadFile.length; i++) {

let item = this.file[i]

this.$refs.upload.post(item);

}

},

上传文件大概就是这样了，关键的代码部分也给出了注释，希望能帮到大家。

既然有了上传文件，那就顺便把下载文件的也一起说了吧 ！其实下载文件比较简单点，直接看代码吧！！！

exportExcel(url){

if(this.data.length == 0){

this.$Message.info('当前列表暂无数据！')

return;

}

let url1 = this.GLOBAL.BASE_URL + url,

sessionId = Cookies.get('status'),

form = $('

').attr('action',url1).attr('method','post');

form.append($('').attr('type','hidden').attr('name','Authorization').attr('value',sessionId));

form.appendTo('body').submit().remove();

},

下载文件主要就是请求头的设置，这里不是iview的下载文件组件，是自己常用的一种，如果有更好的方法欢迎大家踊跃指出

下面是我的公众号，欢迎大家关注，可以一起学习一起进步：

jQuery用FormData对象实现文件上传以及如何通过ajax下载文件

之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看--跑偏了(⊙o⊙)-,我的意思就是用框架实现比较简单,但是如果 ...

win端git连接私服仓库&plus;上传本地项目&plus;从服务器下载文件到win

win端git连接私服仓库: 1.win端 检查c:/Users/用户/.ssh/目录下是否有config文件(!!!没有任何后缀名).如果没有则新建config文件,然后修改添加如下内容: Host ...

vue 阿里云上传组件

vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...

vue中el-upload上传多图片且携带参数，批量而不是一张一张的解决方案

现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

文件上传之——用SWF插件实现文件异步上传和头像截取

之前写过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Fla ...

uedit修改文件上传路劲，支持api文件接口

首先修改一个东西ueditor/ueditor.config.js serverUrl: URL + "php/controller.php" 原来 serverUrl: &quo ...

Struts2文件上传(基于表单的文件上传)

•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

FTP文件上传 支持断点续传 并 打印下载进度(二) —— 单线程实现

这个就看代码,哈哈哈哈哈  需要用到的jar包是: commons-net

servlet实现文件上传，预览，下载和删除

一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数 ...

随机推荐

SQL Server索引进阶第五篇：索引包含列 &period;

包含列解析所谓的包含列就是包含在非聚集索引中,并且不是索引列中的列.或者说的更通俗一点就是:把一些底层数据表的数据列包含在非聚集索引的索引页中,而这些数据列又不是索引列,那么这些列就是包含列.同时,这 ...

RMAN备份与恢复之DataBase

1   准备 [oracle@TEST144239 /]$ sqlplus /nolog SQL Production :: Copyright (c) , , Oracle. All rights ...

4&period;接口隔离原则(Interface Segregation Principle)

1.定义 客户端不应该依赖它不需要的接口: 一个类对另一个类的依赖应该建立在最小的接口上. 2.定义解读 定义包含三层含义: 一个类对另一个类的依赖应该建立在最小的接口上: 一个接口代表一个角色,不应 ...

ASP&period;NET 数据绑定常用代码及其性能分析

用DataBinder.eval 绑定不必关心数据来源(Dataread或dataset).不必关心数据的类型eval会把这个数据对象转换为一个字符串.在底层绑定做了很多工作,使用了反射性能.正因为使 ...

SerializableObj

package JBJADV003; import java.io.*; public class SerializableObj { /** * @param args * @throws IOEx ...

4&period;1 socket

socket  背景概念 脑图结构 OSI 模型 socket 概念特性 脑图结构 理解示意图  额外补充 Socket是应用层与 TCP/IP协议族通信的中间软件抽象层,它是一组接口. 在设计模式中 ...

Kubernetes Kubelet安全认证连接Apiserver

Kubelet使用安全认证连接Apiserver,可以用Token或证书连接.配置步骤如下. 1,生成Token命令 head -c /dev/urandom | od -An -t x | tr - ...

几乎考虑到了每个细节的php图片上传

< ...

BZOJ2142 礼物 【扩展Lucas】

题目 一年一度的圣诞节快要来到了.每年的圣诞节小E都会收到许多礼物,当然他也会送出许多礼物.不同的人物在小E 心目中的重要性不同,在小E心中分量越重的人,收到的礼物会越多.小E从商店中购买了n件礼物, ...

删除datatable的行后，出现&OpenCurlyDoubleQuote;不能通过已删除的行访问该行的信息”的错误，即DeletedRowInaccessibleException

删除datatable的行后,出现“不能通过已删除的行访问该行的信息”的错误 =========================================================== 采 ...