vue实现文件上传读取及下载功能


Posted in Javascript onNovember 17, 2020

本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下

文件的上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现

<template>
 <div class="filediv">
 <el-button @click="downloadFile">下载</el-button>
 <div id="fileselect">
 <el-input style="margin-top: 16px" type="file"></el-input>
 </div>
 </div>
</template>
 
<script>
export default {
 data () {
 return {
 }
 },
 mounted: function () {
 this.$nextTick(function () {
 this.readFile()
 })
 },
 methods: {
 // 下载文件
 downloadFile: function () {
 var content = [
 { 'firstName': 'John', 'lastName': 'Doe' },
 { 'firstName': 'Anna', 'lastName': 'Smith' },
 { 'firstName': 'Peter', 'lastName': 'Jones' }
 ]
 var filecontent = JSON.stringify(content)
 if ('download' in document.createElement('a')) {
 this.download(filecontent, 'testfile.json')
 } else {
 alert('浏览器不支持')
 }
 },
 // 下载设备配置文件
 download: function (content, filename) {
 let link = document.createElement('a')
 link.download = filename
 link.style.display = 'none'
 // 字符内容转变成blob地址
 let blob = new Blob([content])
 link.href = URL.createObjectURL(blob)
 document.body.appendChild(link)
 link.click()
 document.body.removeChild(link)
 },
 // 导入设备,监听上传文件并读取
 readFile: function () {
 console.log('读取文件')
 let fileselect = document.querySelector('#fileselect')
 fileselect.addEventListener('change', function (e) {
 console.log(e)
 let file = e.target.files
 console.log('文件类型')
 console.log(file)
 if (file.length === 0) {
  return
 }
 let reader = new FileReader()
 if (typeof FileReader === 'undefined') {
  this.$message({
  type: 'info',
  message: '您的浏览器不支持FileReader接口'
  })
  return
 }
 reader.readAsText(file[0])
 reader.onload = function (e) {
  console.log('文件内容')
  console.log(e.target.result)
 }
 }.bind(this))
 }
 }
}
</script>
 
<style scoped>
.filediv {
 width: 400px;
 margin: 20px;
}
</style>

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 原型链学习总结
Oct 29 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
js简易版购物车功能
Jun 17 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 #Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 #Javascript
Vue使用NProgress进度条的方法
Sep 21 #Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 #Javascript
vue开发拖拽进度条滑动组件
Sep 21 #Javascript
layui点击弹框页面 表单请求的方法
Sep 21 #Javascript
使用vue制作滑动标签
Sep 21 #Javascript
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP学习之数组值的操作
2011/04/17 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
vue按需加载实例详解
2019/09/06 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python中reader的next用法
2018/07/24 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
酒店销售主管岗位职责
2014/01/04 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
清洁工个人工作总结
2015/03/05 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
出国导师推荐信
2015/03/25 职场文书
小学记事作文之200字
2019/08/06 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
关于Python中*args和**kwargs的深入理解
2021/08/07 Python