vue可以操作本地檔案嗎

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可以操作本地檔案嗎的詳細內容，更多請關注TW511.COM其它相關文章！