Vue之讀取并解析ini文件中的內(nèi)容
更新時(shí)間：2023年10月11日 15:44:50 作者：華北周黑鴨
這篇文章主要介紹了Vue之讀取并解析ini文件中的內(nèi)容,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue讀取并解析ini文件內(nèi)容
今天接到個(gè)任務(wù)，老大讓使用js讀取并解析ini文件中的內(nèi)容，
內(nèi)容如下：
于是，一通百度加群友，然后結(jié)合并加以修改找到了可用的辦法：本人vue2.7版本。
操作過程
使用FileReader對象和ini-parser庫來解析INI文件
首先，安裝ini-parser庫：
在Vue組件中，創(chuàng)建一個(gè)文件選擇框和一個(gè)用于解析INI文件的方法，本人使用element組件庫
在組件中引用ini-parser插件，并在methods中編寫方法
在頁面中選擇ini文件就能看到解析后的ini文件中的數(shù)據(jù)了
相關(guān)代碼
html：
<el-upload ref="csvData" accept=".ini" action=""
:on-change="readInI" webkitdirectory style="margin: 0 3px">
<el-button type="primary" size="mini">
<i class="el-icon-upload">選擇INI配置文件</i>
</el-button>
</el-upload>Js：
<script>
import IniParser from 'ini-parser'
export default {
data () {
return {
configFile: null
}
},
mounted () {
},
methods: {
// 讀取csv文件
readInI (file) {
const files = file.raw
if (files) {
const reader = new FileReader()
reader.onload = () => {
const fileContent = reader.result
const parsedIni = IniParser.parse(fileContent)
// 在這里可以處理解析后的INI文件內(nèi)容
console.log(parsedIni)
this.configFile=parsedIni //將解析后的內(nèi)容進(jìn)行賦值
}
reader.readAsText(files)
}
}
}
}
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解
今天小編就為大家分享一篇vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于如何利用VUE創(chuàng)建視頻流應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue使用websocket及封裝過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
實(shí)例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法
這篇文章主要介紹了vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
解決vue終端報(bào)錯(cuò):不是內(nèi)部或外部命令
最近學(xué)習(xí)一下前端框架Vue,整體上感覺還是比較有意思的,但是在安裝vue-cli腳手架的時(shí)候,出現(xiàn)了一些問題,解決問題也花費(fèi)了不少時(shí)間,下面這篇文章主要給大家介紹了關(guān)于解決vue終端報(bào)錯(cuò):不是內(nèi)部或外部命令的相關(guān)資料,需要的朋友可以參考下2023-02-02
通過vue-router懶加載解決首次加載時(shí)資源過多導(dǎo)致的速度緩慢問題
這篇文章主要介紹了vue-router懶加載解決首次加載時(shí)資源過多導(dǎo)致的速度緩慢問題,文中單獨(dú)給大家介紹了vue router路由懶加載問題，需要的朋友可以參考下2018-04-04
在項(xiàng)目中會(huì)發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象，當(dāng)我們在使用element-plus中的圖標(biāo)組件時(shí)會(huì)出現(xiàn)內(nèi)存泄漏，所以本文講給大家講講如何解決vue3中的內(nèi)存泄漏的問題,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Nuxt.js實(shí)戰(zhàn)和配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue中通過vue-router實(shí)現(xiàn)命名視圖的問題
這篇文章主要介紹了在Vue中通過vue-router實(shí)現(xiàn)命名視圖,本文給大家提到了vue-router的原理解析，給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁面引入的方法,需要的朋友可以參考下2024-04-04