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 相关文章推荐
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
vue+canvas实现拼图小游戏
Sep 18 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
详解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中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
不错的新闻标题颜色效果
2006/12/10 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
污水厂厂长岗位职责
2014/01/04 职场文书
自荐信格式简述
2014/01/25 职场文书
市政管理求职信范文
2014/05/07 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
安徽导游词
2015/02/12 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
餐馆开业致辞
2015/08/01 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python