详解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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
jQuery 事件队列调整方法
Sep 18 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 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
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
财务助理岗位职责
2013/11/10 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
农村葬礼主持词
2014/03/31 职场文书
大专学生求职信
2014/07/04 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
简单聊聊Golang中defer预计算参数
2022/03/25 Golang