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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
