当需要批量导入的时候,一般会提供下载示例文件的功能。实现下载功能直接使用<a>标签即可。

<a class='download' :href='downloadhttp' download=""  title="下载">下载</a>

downloadhttp为文件下载的路径,download属性是为了避免浏览器直接执行打开而不下载。路径是下载文件很重要的组成部分,一般为了方便维护都会将文件放在服务器,路径需要在apiconfig.js文件中判断是测试端还是服务器端,主要思路是将两端设置不同的baseUrl,在此不再赘述。downloadhttp = baseUrl + 路径相同部分。在Linux服务器上最好将文件名设置为英文,中文在解码时可能会出现偏差,导致文件寻找失败。

文件的上传主要使用element中的el-upload。

<el-uploadclass="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove"multiple:limit="3":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<script>export default {data() {return {fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]};},methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);},beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${ file.name }?`);}}}
</script>

其中action是必须的参数,用来写传输的接口地址。用的比较多的是on-success,这个钩子为上传成功时的回调,当传输完成后即可调用。无论后台接口返回何值,只要成功上传,就会调用该函数。但是在实际应用中,由于Excel填写的格式不正确等问题,会导致后台解析失败,返回success = 0.这时我们需要使用该方法来进行后续的操作。

<el-uploadclass="upload-demo"action="":on-success='handlesuccess'multiple:limit="3":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">点击上传</el-button>
</el-upload>

<script>export default {data() {return {fileList: []//此数组中存入所有提交的文档信息
      };},methods: {handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);},handlesuccess(response, file, fileList){//response即为后台返回的全部内容if(response.success === 1){console.log('解析成功')}else{console.log('解析失败')}}}}
</script>

其次使用频率较高的为clearFiles方法,用来清除已选中的所有文档信息。上传时在dialog中进行,当关闭当前dialog,再次打开时需要清空上一次的数据,如果是表格表单类型,可直接将其绑定的数组对象清空,若是文件类型,则需要clearFiles方法来进行清除

转载于:https://www.cnblogs.com/tomatoto/p/9594638.html

Vue+ElementUI实现文件的下载与上传相关推荐

  1. 基于vue框架下使用Element-UI获取文件MD5值并上传

    基于vue框架下使用Element-UI获取文件MD5值并上传 使用插件: spark-md5 .vue页面 <el-uploadclass="avatar-uploader idca ...

  2. SpringBoot+Vue+ElementUI实现文件上传与文件下载

    作者: Memory(星哥) Wechat:/QQ: 574373426 整理不易,感谢支持,欢迎 收藏 转发 分享 专注IT职业教育多年,学编程找星哥 SpringBoot+Vue+ElementU ...

  3. shp文件纯前端的上传、解析、编辑、下载

    本文主要讲述一种体量较小的shp文件纯前端的上传.解析.编辑.下载的技术流程,适用于要素量少的shp文件修改操作. 准备工作 下载一下几个包,详细用法请见结尾参考. npm install file- ...

  4. Vue封装一个简单轻量的上传文件组件

    一.之前遇到的一些问题 项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总会有一些莫名其妙的bug.比如用某上传组件,明明注明(:multiple="false& ...

  5. Linux命令scp用于远程文件的拷贝(上传和下载)

    3_Linux命令scp用于远程文件的拷贝(上传和下载) 文章目录 1.SCP简介 2.SCP使用 2.1.命令格式: 2.2.命令功能: 2.3.命令参数: 3.使用实例: 如何将本地文件通过终端上 ...

  6. [转载]ASP.NET Core文件上传与下载(多种上传方式)

    ASP.NET Core文件上传与下载(多种上传方式) 前言 前段时间项目上线,实在太忙,最近终于开始可以研究研究ASP.NET Core了. 打算写个系列,但是还没想好目录,今天先来一篇,后面在整理 ...

  7. servlet文件上传下载_Servlet上传文件和下载文件示例

    servlet文件上传下载 Java Web应用程序中的文件上载和下载以及常见任务. 由于最近我写了很多有关Java servlet的文章 ,因此我想提供一个使用servlet上传和下载文件的示例示例 ...

  8. 重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件...

    重新想象 Windows 8.1 Store Apps (89) - 通信的新特性: 下载数据, 上传数据, 上传文件 原文:重新想象 Windows 8.1 Store Apps (89) - 通信 ...

  9. FTP命令:下载,上传FTP服务器中的文件

    步骤 1: 建立 FTP 连接 想要连接 FTP 服务器,在命令上中先输入ftp然后空格跟上 FTP 服务器的域名 'domain.com' 或者 IP 地址例如:1.ftp domain.com2. ...

最新文章

  1. Dockerfile实践优化建议
  2. linux rpm安装不成功,rpm 包不能成功安装
  3. 选择加冒泡排序法与找鞍马之总结与感受
  4. 中国高压断路器(QF)行业发展战略及创新前景展望报告2022-2028年版
  5. 流体式布局与响应式布局_将固定像素设计转换为流体比例布局
  6. quarkus_使用Quarkus调试容器中的系统测试(视频)
  7. 表达式前后缀表达形式 [zz]
  8. Tomcat8 连接池
  9. 遍历处理path及其子目录所有文件
  10. STM32-IO引脚复用-原理和使用
  11. 单进程架构数据库谨防隐形杀手
  12. 按键精灵调用百度文字识别OCR服务
  13. 主流地信遥感数据导航
  14. 解决System进程占用80端口
  15. 安装jdk在linux(2)
  16. 2013/06 事情发生之后都会显得云淡风轻
  17. 六年级语文计算机个人研修计划,个人研修计划
  18. The simplest way to combine two csv file in python
  19. avalonia 控件TextBox 及其他控件文本改变事件
  20. 将本地图片或者网上图片用post方式上传到图片服务器

热门文章

  1. 从 WordCount 到 MapReduce 计算模型
  2. 动图图解C语言插入排序算法,含代码分析
  3. 使用netty实现一个类似于微信的聊天功能
  4. RHEL 5.4 安装Oracle 11gR2, 安装篇1...
  5. 如何设计LRU Cache算法
  6. aac文件损坏修复软件_SysTools Outlook Recovery Tool : 修复损坏的Outlook PST文件的先进的软件...
  7. es对分组后结果进行统计_ElasticSearch里面如何分组后根据sum值排序
  8. 课程升级 | 极速构建知识体系,即学即用 Serverless
  9. 基于qt和mysql的地铁线路系统_[源码和文档分享]基于QT实现的可视化地铁换乘查询系统...
  10. itunes备份包括哪些内容_品牌VI设计一般都包括哪些内容?