DAY11 - 前端网页怎麽处理档案？

前言

前几天我们聊的是串接API，在前端功能开发里，遇到的第二个主题就是档案处理。

档案处理也是在网页中常见的功能。记得一开始要做的时候糊乱的测试，搞不清楚blob、也不知道FileReader就硬用，在档案处理时花费许多时间在乱闯。除了API串接遇到的问题之外，这是我在前端旅程中除了逻辑处理外，遇到的第二个关卡，所以，这次藉这这个机会，把档案处理相关的概念原理统一整理一下，也希望可以分享给之後需要的人

而接下来的档案处理主题会分几天来分享，今天先带大家了解一下我们对於档案处理的规划：

谈谈认识档案处理的心路历程

前端工程师想到档案处理，你想到的画面是什麽？

..
..
..
...

不知道大家是不是跟我一样，第一个想到的就是利用<input type="file">选择本地端档案的画面吧

那我们透过这个方式选择了一个档案後，这个档案会是怎麽呈现？“档案”本身是什麽呢？
选择了档案之後，我们用console印出来选择的这个档案如下：

可以看到这个被选择的档案是一个在FileList中的File的物件，那什麽是FileList, 什麽是File? 我们还可以回到最源头，Blob物件、当然後有BufferArray等等。因此，我们从 「第一部分：档案类的物件关系厘清」 为这个主题的开端，先了解档案相关的物件。再来进入「第二部分：档案处理应用」从大家常见的档案处理方式，再做介绍关於档案应用的方法 Ex:FileReader。实际应用便是从前端的功能应用着眼，包含：上传、读取、预览、下载...等等。因此主题章节规划如下：

第一部分. 档案类的物件关系厘清

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

第二部分. 档案处理应用

• 上传档案
• 档案格式比对
• 预览
• 下载档案
• 本地端编辑存挡应用

了解脉络之後，我们明天就正式开始档案处理之旅吧～～