本教程操作環境：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中文網其它相關文章！
關鍵詞：
營業執照公示信息