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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
JavaScript网页制作特殊效果用随机数
May 22 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 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
php5 图片验证码实现代码
2009/12/11 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JavaScript错误处理
2015/02/03 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
python中的代码编码格式转换问题
2015/06/10 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Django框架多表查询实例分析
2018/07/04 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
前台接待岗位职责
2013/12/03 职场文书
公司委托书格式范文
2014/04/04 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
滴水洞导游词
2015/02/10 职场文书
电力培训学习心得体会
2016/01/11 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python