Element-UI對(duì)于文件上傳組件的功能點(diǎn)著重于文件傳遞到后臺(tái)處理，所以要求action為必填屬性。但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺(tái)，比如在本地打開一個(gè)JSON文件，利用JSON文件在前端進(jìn)行動(dòng)態(tài)展示等等。
下面就展示一下具體做法：

首先定義一個(gè)jsonContent, 我們的目標(biāo)是將本地選取的文件轉(zhuǎn)換為JSON賦值給jsonContent

然后我們的模板文件是利用el-dialog和el-upload兩個(gè)組件組合：這里停止文件自動(dòng)上傳模式: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對(duì)變量uploadFiles中的文件進(jìn)行讀取并賦值給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)    }   }

為方便測(cè)試，以下是完整代碼：

另外一篇文章是介紹如何將jsonContent變量中的JSON對(duì)象保存到本地文件

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