Element-UI中Upload上传文件前端缓存处理示例


Posted in Javascript onFebruary 21, 2019

Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性。

但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件,利用JSON文件在前端进行动态展示等等。

下面就展示一下具体做法:

首先定义一个jsonContent, 我们的目标是将本地选取的文件转换为JSON赋值给jsonContent

然后我们的模板文件是利用el-dialog和el-upload两个组件组合:这里停止文件自动上传模式:auto-upload="false"

<el-button type="primary" @click="dialogVisible = true">Load from File</el-button>
 <el-dialog title="Load JSON document from file" :visible.sync="dialogVisible">
  <el-upload :file-list="uploadFiles" action="alert" :auto-upload="false" multiple :on-change="loadJsonFromFile">
   <el-button size="small" type="primary">Select a file</el-button>
   <div slot="tip">upload only jpg/png files, and less than 500kb</div>
  </el-upload>
  <span slot="footer">
   <el-button type="primary" @click="dialogVisible = false">cancel</el-button>
   <el-button type="primary" @click="loadJsonFromFileConfirmed">confirm</el-button>
  </span>
 </el-dialog>

最后通过html5的filereader对变量uploadFiles中的文件进行读取并赋值给jsonContent

if (this.uploadFiles) {
    for (let i = 0; i < this.uploadFiles.length; i++) {
     let file = this.uploadFiles[i]
     console.log(file.raw)
     if (!file) continue
     let reader = new FileReader()
     reader.onload = async (e) => {
      try {
       let document = JSON.parse(e.target.result)
       console.log(document)
      } catch (err) {
       console.log(`load JSON document from file error: ${err.message}`)
       this.showSnackbar(`Load JSON document from file error: ${err.message}`, 4000)
      }
     }
     reader.readAsText(file.raw)
    }
   }

为方便测试,以下是完整代码:

<template>
 <div>
  <el-button type="primary" @click="dialogVisible = true">Load from File</el-button>
 <el-dialog title="Load JSON document from file" :visible.sync="dialogVisible">
  <el-upload :file-list="uploadFiles" action="alert" :auto-upload="false" multiple :on-change="loadJsonFromFile">
   <el-button size="small" type="primary">Select a file</el-button>
   <div slot="tip">upload only jpg/png files, and less than 500kb</div>
  </el-upload>
  <span slot="footer">
   <el-button type="primary" @click="dialogVisible = false">cancel</el-button>
   <el-button type="primary" @click="loadJsonFromFileConfirmed">confirm</el-button>
  </span>
 </el-dialog>
</div>
 
</template>
 
<script>
export default {
 data () {
  return {
   // data for upload files
   uploadFilename: null,
   uploadFiles: [],
   dialogVisible: false
  }
 },
 methods: {
  loadJsonFromFile (file, fileList) {
   this.uploadFilename = file.name
   this.uploadFiles = fileList
  },
  loadJsonFromFileConfirmed () {
   console.log(this.uploadFiles)
   if (this.uploadFiles) {
    for (let i = 0; i < this.uploadFiles.length; i++) {
     let file = this.uploadFiles[i]
     console.log(file.raw)
     if (!file) continue
     let reader = new FileReader()
     reader.onload = async (e) => {
      try {
       let document = JSON.parse(e.target.result)
       console.log(document)
      } catch (err) {
       console.log(`load JSON document from file error: ${err.message}`)
       this.showSnackbar(`Load JSON document from file error: ${err.message}`, 4000)
      }
     }
     reader.readAsText(file.raw)
    }
   }
   this.dialogVisible = false
  }
 }
}
</script>

PS: 相关阅读

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

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

Javascript 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
vue项目实战总结篇
Feb 11 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 #Javascript
javascript中join方法实例讲解
Feb 21 #Javascript
React 组件渲染和更新的实现代码示例
Feb 21 #Javascript
vue图片上传本地预览组件使用详解
Feb 20 #Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 #Javascript
浅谈小程序 setData学问多
Feb 20 #Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 #Javascript
You might like
PHP 程序授权验证开发思路
2009/07/09 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python3.5的包存放的具体路径
2020/08/16 Python
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
机械专业技术员求职信
2014/06/14 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
捐助倡议书
2015/01/19 职场文书
保研推荐信格式
2015/03/25 职场文书
观后感开头
2015/06/19 职场文书
高温慰问简报
2015/07/21 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python