vue可以操作本機文件，其操作方法為：1、利用「XMLHttpRequest」對本機文件進行讀取操作；2、利用「input」標籤上傳文件，然後使用「FileReader」物件和非同步api ，讀取文件中的資料。
本教學操作環境：Windows10系統、Vue 3版、Dell G3電腦。
vue可以操作本機檔案嗎？
可以。
Vue專案透過讀取本機檔案內容來顯示內容
公司專案需要在登陸之前，實作客戶自訂專案標題。由於還未登陸，所以肯定無法透過後端管理系統進行配置。
第一個想到的方法是透過讀取本機檔案內容，來顯示標題內容。
客戶需要求改標題時，直接修改本機文件內容即可。
讀取本機檔案的想法有兩種，第一種是利用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對象，h5提供的非同步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对象，h5提供的异步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可以操作本機檔案嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
