溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“vue可不可以操作本地文件”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue可不可以操作本地文件”文章吧。
vue可以操作本地文件，其操作方法是：1、利用“XMLHttpRequest”對本地文件進行讀取操作；2、利用“input”標簽上傳文件，然后使用“FileReader”對象和異步api，讀取文件中的數據。
公司項目需要在登陸之前，實現客戶自定義項目標題。由于還未登陸，所以肯定無法通過后端管理系統配置。
第一個想到的辦法是通過讀取本地文件內容，來顯示標題內容。
客戶需要求改標題時，直接修改本地文件內容即可。
讀取本地文件的思路有兩種，第一種是利用XMLHttpRequest，第二種是利用input的type=file將文件先上傳，再讀取。
利用XMLHttpRequest對本地文件進行讀取操作，值得注意的是，HTML文檔的格式要與流中的讀取格式設置一致， 代碼如下：
methods: {
readFile(filePath) {
// 創建一個新的xhr對象
let xhr = null
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
// eslint-disable-next-line
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
const okStatus = document.location.protocol === 'file' ? 0 : 200
xhr.open('GET', filePath, false)
xhr.overrideMimeType('text/html;charset=utf-8')
xhr.send(null)
return xhr.status === okStatus ? xhr.responseText : null
},}
首先創建一個讀取文件內容的函數readFile，通過XMLHttpRequest對象，讀取指定路徑中的文件，格式指定為text/html,并返回內容。
然后直接在login組件的created鉤子函數中，調用并讀取文件內容，賦值給需要顯示的標題title屬性。
created() {
this.getList()
this.title = this.readFile('../../../static/title.txt')
console.log(this.title)
},
本次項目需求就是使用此方案解決。
上傳文件利用input標簽，然后使用FileReader對象，h6提供的異步api，可以讀取文件中的數據。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<span>點擊上傳：</span> <input type="file" id="files1" onchange="uploadFile1()">
<br>
<span>點擊上傳2：</span> <input type="file" id="files2" onchange="uploadFile2(event)">
<script>
function uploadFile1() {
const selectedFile = document.getElementById('files1').files[0]
// 讀取文件名
const name = selectedFile.name // 讀取文件大小
const size = selectedFile.size // FileReader對象，h6提供的異步api，可以讀取文件中的數據。
const reader = new FileReader()
// readAsText是個異步操作，只有等到onload時才能顯示數據。
reader.readAsText(selectedFile)
reader.onload = function () {
//當讀取完成后回調這個函數,然后此時文件的內容存儲到了result中,直接操作即可
console.log(this.result);
}
}
function uploadFile2(e) {
const selectedFile = e.target.files[0]
const reader = new FileReader()
// 文件內容載入完畢之后的回調。
reader.onload = function(e) {
console.log(e.target.result)
}
reader.readAsText(selectedFile)
}
</script>
</body></html>以上就是關于“vue可不可以操作本地文件”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
