Element-UI中Upload上傳檔案前端快取處理

摘要： Element-UI對於檔案上傳元件的功能點著重於檔案傳遞到後臺處理，所以要求action為必填屬性。 但是如果需要讀取本地檔案並在前端直接處理，檔案就沒有必要傳遞到後臺，比如在本地開啟一個JSON檔案，利用JSON檔案在前端進行動態展示等等。 下面就展示一下具...

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

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

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

作者：java_augur

來源：CSDN

原文：https://blog.csdn.net/java_au...

版權宣告：本文為博主原創文章，轉載請附上博文連結！