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中的文件进行读取并赋值给jsonContentif (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>。