JavaScript 文件操做

工做中經常須要寫一些小腳本處理事情，好比建立測試文件、處理某個文本等等，以前作測試開發的時候是用 Python 作的，如今寫前端，JavaScript 成爲主力語言，天然想把這些小腳本用 JavaScript 實現。腳本中常見的工做就是文件讀寫，所以對 JavaScript 文件讀寫知識作下強化和總結。

Node

Node 中的文件系統操做被封裝在 fs 模塊，每一個 API 都提供同步和異步兩種形式，異步函數 fs.xxx 對應同步函數是 fs.xxxSync，例如 fs.readFile 對應 fs.readFileSync 。區別主要是同步函數要麼返回結果要麼拋出異常，而異步函數的參數多了 callback ，用來處理異常或者正常返回的結果。另外，fs.promises 中還提供了基於 Promise 的異步 API。

腳本中用同步 API 更加簡潔，如下以同步 API 爲例介紹主要操做：

讀文件

讀文件使用 fs.readFileSync(path[, options]) ，它的第一個參數是路徑，第二個參數是 encoding(default: null) 和 flag(default: 'r') 組成的 options，若是 encoding 爲 null，則返回 buffer，不然返回 string，options 也能夠是 string，這時表示 encoding。

支持的 encoding 參考 這裏，通常用 utf8 就好了。

const fs = require('fs')

// suppose 'xxx' in data.txt
const data = fs.readFileSync('/home/vincent/data.txt', 'utf8')

console.log('data = ', data) // output: data = xxx
複製代碼

寫文件

寫文件使用 fs.writeFileSync(path, data[, options])，第一個參數是路徑，第二個是要寫入的內容，第三個是 encoding(default: 'utf8')、mode(default: 0o666) 和 flag(default: w) 組成的 options，通常 options 使用默認值便可。

const fs = require('fs')

fs.writeFileSync('/home/vincent/data.txt', 'xxx') // then 'xxx' in data.txt
複製代碼

流式讀寫

若是文件很大，好比數十 GB 的日誌文件，全量讀寫就不合適了。這時候可使用以下函數操做：

• fs.createReadStream(path[, options])
• fs.createWriteStream(path[, options])

這兩個函數返回 Stream 實例，實例方法參考 這裏。

Browser

瀏覽器環境須要經過 FileReader API 來讀文件內容，主要場景是上傳圖片前生成預覽縮略圖、文件內容校驗等，示例代碼以下：

const input = document.getElementsByTagName('input')[0]

input.addEventListener('change', function() {
  const file = this.files[0] // suppose file content is 'xxx'

  const reader = new FileReader();
 
  reader.onload = function (e) {
    const = data = reader.result
    console.log(data) // output: xxx
  }

  reader.readAsText(file, 'UTF-8')
}, false)
複製代碼