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)文章
本文主要介紹了Vue3里的EffectScope，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
今天小編就為大家分享一篇vue添加axios,并且指定baseurl的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vuex的使用步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
elementUI自定義上傳文件功能實現(xiàn)(前端后端超詳細過程)
自定義上傳思路很簡單,下面這篇文章主要給大家介紹了關(guān)于elementUI自定義上傳文件功能實現(xiàn)(前端后端超詳細過程)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
深入淺析Vue中mixin和extend的區(qū)別和使用場景
Vue中有兩個較為高級的靜態(tài)方法mixin和extend，接下來給大家介紹Vue中mixin和extend的區(qū)別和使用場景，感興趣的朋友一起看看吧2019-08-08
Vue data的數(shù)據(jù)響應(yīng)式到底是如何實現(xiàn)的
這篇文章主要介紹了Vue data的數(shù)據(jù)響應(yīng)式到底是如何實現(xiàn)的，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了如何在vue中使用jointjs過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了如何利用vue實現(xiàn)一個簡單的Grid拖拽布局,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
這篇文章主要介紹了VUE實現(xiàn)自身整體組件銷毀的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
基于vue-seamless-scroll實現(xiàn)無縫滾動效果
這篇文章主要為大家詳細介紹了基于vue-seamless-scroll實現(xiàn)無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04