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 相关文章推荐
文本加密解密
Jun 23 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
Node.js返回JSONP详解
May 18 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
vue-model实现简易计算器
Aug 17 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中Smarty模板初体验
2011/08/08 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php中session与cookie的比较
2015/01/27 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
express 项目分层实践详解
2018/12/10 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Python读取csv文件实例解析
2019/12/30 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
电子商务专业学生的学习自我评价
2013/10/27 职场文书
民主评议党员总结
2014/10/20 职场文书
2014年司法局工作总结
2014/12/11 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
公司老总年会致辞
2015/07/30 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
MySQL的索引你了解吗
2022/03/13 MySQL
Python实现抖音热搜定时爬取功能
2022/03/16 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python