详解Element-UI中上传的文件前端处理


Posted in Javascript onAugust 07, 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)
    }
   }

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

另外一篇文章是介绍如何将jsonContent变量中的JSON对象保存到本地文件

<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>

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

Javascript 相关文章推荐
Node.js 制作实时多人游戏框架
Jan 08 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 #Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 #Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 #Javascript
vue 集成jTopo 处理方法
Aug 07 #Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 #Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 #Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 #Javascript
You might like
初品cakephp 入门基础
2012/02/16 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
js中的闭包学习心得
2018/02/06 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python类的专用方法实例分析
2015/01/09 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Python如何调用外部系统命令
2019/08/07 Python
python 字典套字典或列表的示例
2019/12/16 Python
办公室助理岗位职责
2013/12/25 职场文书
办公室主任先进事迹
2014/01/18 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
公司员工离职证明书
2014/10/04 职场文书
给老师的一封感谢信
2015/01/20 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书