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