Element-UI對于文件上傳組件的功能點著重于文件傳遞到后臺處理，所以要求action為必填屬性。

但是如果需要讀取本地文件并在前端直接處理，文件就沒有必要傳遞到后臺，比如在本地打開一個JSON文件，利用JSON文件在前端進行動態(tài)展示等等。

下面就展示一下具體做法：

首先定義一個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)    }   }

為方便測試，以下是完整代碼：

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