vue如何讀取文件內(nèi)容
小編給大家分享一下vue如何讀取文件內(nèi)容，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
10年積累的網(wǎng)站設(shè)計(jì)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有容城免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
vue讀取文件內(nèi)容的方法：1、創(chuàng)建一個(gè)test.properties測(cè)試內(nèi)容；2、通過(guò)“readTestFile(){const file = this.loadFile('test.properties')...}”方法讀取文件內(nèi)容即可。
本文操作環(huán)境：windows7系統(tǒng)、vue/cli 4.3.1&&ultimate 2019.1&&nodev12.16.2版，DELL G3電腦。
觀前提示：
本文所使用的IDEA版本為ultimate 2019.1，node版本為v12.16.2，vue版本為@vue/cli 4.3.1。
在項(xiàng)目開發(fā)過(guò)程中，需要在vue前端讀取配置等文件。
1.實(shí)例
我的本地文件放在vue項(xiàng)目中的public文件夾中
test.properties
content=測(cè)試內(nèi)容
vue文件中讀取文件內(nèi)容
// 讀取test.properties
readTestFile() {
const file = this.loadFile('test.properties')
console.info(file)
console.log(this.unicodeToUtf8(file))},
// 讀取文件
loadFile(name) {
const xhr = new XMLHttpRequest()
const okStatus = document.location.protocol === 'file:' ? 0 : 200
xhr.open('GET', name, false)
xhr.overrideMimeType('text/html;charset=utf-8')
// 默認(rèn)為utf-8
xhr.send(null)
return xhr.status === okStatus ? xhr.responseText : null},
// unicode轉(zhuǎn)utf-8
unicodeToUtf8(data) {
data = data.replace(/\\/g, '%')
return unescape(data)}運(yùn)行結(jié)果如下
2.可能遇到的問(wèn)題
2.1.解析的文件亂碼
讀取文件的方法，以u(píng)tf-8形式讀取文件，建議修改文件格式保存為utf-8編碼，或者改變讀取格式
xhr.overrideMimeType('text/html;charset=utf-8')
// 默認(rèn)為utf-82.2.讀取中文為unicode編碼
由于properties存儲(chǔ)中文為unicode編碼，需要在后臺(tái)，或者前端處理一下
// unicode轉(zhuǎn)utf-8
unicodeToUtf8(data) {
data = data.replace(/\\/g, '%')
return unescape(data)}以上是“vue如何讀取文件內(nèi)容”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享題目：vue如何讀取文件內(nèi)容
地址分享：http://m.jiaotiyi.com/article/iijeio.html