详解Element-UI中上传的文件前端处理
2019-08-07 14:37
1091 查看
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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- Element-UI中Upload上传文件前端缓存处理示例
- vue+elementui el-upload上传文件携带参数
- express拖拽文件上传,XMLHttpRequest(),服务器端处理详解
- H5 -- 详解前端文件上传(FormData 对象的使用)
- elementui el-upload附件上传--上传之前需要修改文件内容
- element-ui文件上传 做类型大小的限制
- Laravel中使用 element-ui 文件上传 CrsfToken错误
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- vue+element-ui上传文件
- 使用elementUI的时候,使用Upload 上传的时候,使用 list-type 属性来设置文件列表的样式,before-upload方法失效
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
- element-ui upload组件多文件上传
- element-ui多文件上传的实现示例
- 关于vue+element ui 实现上传文件
- SpringBoot+element-ui进行文件上传
- Vue上传文件:ElementUI中的upload实现
- Vue Element UI + OSS实现上传文件功能
- 阿里OSS Java-SDK带进度条上传,配合前端element-ui upload组件使用示例
- elementUI+Vue 上传文件大小与文件类型校验
- 在element-ui + axios中,使用formData实现文件上传