详解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 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 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模板中出现空行解决方法
2011/03/08 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
python unittest实现api自动化测试
2018/04/04 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
django自带调试服务器的使用详解
2019/08/29 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
python实现马丁策略的实例详解
2021/01/15 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
大学生旷课检讨书
2014/01/22 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
求职信内容怎么写
2014/05/26 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
司机工作自我鉴定
2014/09/19 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书