前言

前幾天我們聊的是串接API，在前端功能開發裡，遇到的第二個主題就是檔案處理。

檔案處理也是在網頁中常見的功能。記得一開始要做的時候糊亂的測試，搞不清楚blob、也不知道FileReader就硬用，在檔案處理時花費許多時間在亂闖。除了API串接遇到的問題之外，這是我在前端旅程中除了邏輯處理外，遇到的第二個關卡，所以，這次藉這這個機會，把檔案處理相關的概念原理統一整理一下，也希望可以分享給之後需要的人

而接下來的檔案處理主題會分幾天來分享，今天先帶大家了解一下我們對於檔案處理的規劃：

談談認識檔案處理的心路歷程

前端工程師想到檔案處理，你想到的畫面是什麼？

..
..
..
...

不知道大家是不是跟我一樣，第一個想到的就是利用<input type="file">選擇本地端檔案的畫面吧

那我們透過這個方式選擇了一個檔案後，這個檔案會是怎麼呈現？“檔案”本身是什麼呢？
選擇了檔案之後，我們用console印出來選擇的這個檔案如下：

可以看到這個被選擇的檔案是一個在FileList中的File的物件，那什麼是FileList, 什麼是File? 我們還可以回到最源頭，Blob物件、當然後有BufferArray等等。因此，我們從 「第一部分：檔案類的物件關係釐清」 為這個主題的開端，先了解檔案相關的物件。再來進入「第二部分：檔案處理應用」從大家常見的檔案處理方式，再做介紹關於檔案應用的方法 Ex:FileReader。實際應用便是從前端的功能應用著眼，包含：上傳、讀取、預覽、下載...等等。因此主題章節規劃如下：

第一部分. 檔案類的物件關係釐清

File, FileList, Blob, ArrayBuffer, Object URL, Data URL

第二部分. 檔案處理應用

• 上傳檔案
• 檔案格式比對
• 預覽
• 下載檔案
• 本地端編輯存擋應用

了解脈絡之後，我們明天就正式開始檔案處理之旅吧～～