[筆記] 哎呀！不小心刻了一套 React UI 元件庫 9 – Upload

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Upload。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

原生的 html 元件 <input type=”file”> 就可以完成上傳，美化版本的邏輯是「隱藏原生元件，使用按鈕去觸發原生元件」

原生元件就可以限制單個或是多個附檔名，以及上傳單一或是多個檔案

若要預覽選取的檔案，有兩種做法。我這邊決定使用第二個，

1. 將 FIle 透過 FileReader() 得到一個 base64 的 string，然後再將這個值放到 img 的 src 屬性
2. 直接用 URL.createObjectURL(File) 方法，產生 blob 內容放到 img 的 src 屬性。不過每次重新生成前，要先將記憶體釋放以免造成 memory leak

至於清空選的檔案，可將 <input> 的 value 設為 empty or null；強迫產生一個新的 input element；form.reset() 方法來實現

---

屬性

1. resetKey：當 input Value 改變時，此值會重新生成，也就會觸發 React 的更新機制，產生一個新的元件。相當於重設元件
2. accept：限制檔案類型
3. multiple：是否選擇多個檔案
4. onChange：上傳檔案後，執行的 callback
5. children：這裡指的是上傳的按鈕外觀

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/3c55606c9b1f60c15eec3df172713a7ccfdd022e

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 142
• [筆記] 程式必修課！離散數學與演算法 – 141
• [筆記] 程式必修課！離散數學與演算法 – 140
• [筆記] 程式必修課！離散數學與演算法 – 138
• [筆記] Nuxt2 + Buefy0.X + Axios 升級至 Nuxt4 + Buefy1.X + ofetch